關閉引導模式

Question

我在模態上有兩個按鈕，首先我需要保存更改並關閉模態，其次我需要關閉模態並重置更改 - 當人們通過單擊任意位置關閉模態時，同樣的事情。 問題是我不知道如何檢查是否單擊了保存按鈕。

這是html：

<div class="modal fade" id="modalNumber" tabindex="-1" role="dialog" aria-labelledby="modalNumberLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          blablabla
          <div class="modal-footer">
             <button data-dismiss="modal" class="btn-u btn-u-default" type="button">{{ 'backButton'|trans }}</button>
             <button type="submit" class="btn-u saveChanges">{{ 'confirmChangesButton'|trans }}</button>
          </div>
       </div>
   </div>
</div>

這是JS代碼：

$('.saveChanges').on('click', function () {
    // doing something here 
    // ....


    // and closing modal in the end
    $(this).closest('.modal.fade').modal('hide');;
});

$('.modal.fade').each(function(index, object) {
    $(object).on('hidden.bs.modal', function (e) {
        console.log(e.target);


        // here is part of irrelevant code - what's important is that I use index and I need to know if saveButton was clicked
        mainContainer.resetGroup(index);
    });
});

e.target總是返回div class="modal fade"元素，而不是按鈕

重要的是 - 我不想調用mainContainer.resetGroup(index); 單擊保存按鈕時。

Answer 1

當您將一個函數附加到您的 save-btn 時，您不需要知道點擊了哪個按鈕。 在我的例子中有兩個函數，類似於你的例子。 單擊 save-btn 時調用第一個函數。 在這個函數中，你可以獲取數據，你必須保存並保存它（例如通過ajax）。

每次關閉模態時都會調用第二種方法。 但是當 save-btn 被按下時，第一個函數被調用了，因此你不需要再檢查哪個按鈕被按下了......

您只需要用您的“保存程序”替換 alert(data) 函數。 我希望我沒有誤解你的問題......

$(document).ready(function(){

  $('.save-btn').on('click', function(evt){
     evt.preventDefault();

      var $btn = $(this);
      var $modal = $btn.closest('.modal');
      var data = $modal.find('form').serializeArray();

      // save data
      alert(data);

      // close modal
      $modal.modal('hide');

  });

  $('#myModal').on('hidden.bs.modal', function(evt) {

     alert('modal was hidden -- clear input fields'); 
      $('#myModal').find('input').val('');
  });
});

看看這個小提琴： https : //jsfiddle.net/216q3jgk/4/

編輯：如果您知道按下了哪個按鈕，我建議在按下 save-btn 時向您的模態添加數據屬性。 要添加數據屬性，請在關閉模態之前在第一個函數中調用它：

    $modal.data('savePressed', true);

可以使用以下代碼在hidden.bs.modal函數中檢查數據屬性：

    var $modal = $(evt.target);
    if (!$modal.data('savePressed')) {
        // save button was NOT pressed
        alert('save not pressed');   
    }

你可以在這個小提琴中找到一個完整的例子： http : //jsfiddle.net/216q3jgk/5/