关闭引导模式

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/