Question

我在模态上有两个按钮，首先我需要保存更改并关闭模态，第二个我需要关闭模态并重置更改 - 当人通过点击任意位置关闭模态时也是如此。问题是我不知道如何检查是否点击了保存按钮。

这是html：

<Image source={require('./my-icon.png')} />

这里是JS代码：

PixelRatio

<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>始终返回$('.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。

Answer 1

将功能附加到save-btn时，您无需知道单击了哪个按钮。在我的例子中有两个函数，类似于你的例子。单击save-btn时会调用第一个函数。在此功能中，您可以获取数据，您必须保存并保存它（例如通过ajax）。

每次关闭模态时都会调用第二种方法。但是当按下save-btn时，之前调用了第一个函数，因此你不需要再检查按下了哪个按钮......

您只需要使用“保存程序”替换警报（数据）功能。我希望我没有误解你的问题...

$(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函数中检查data-attribute：

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

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

关闭bootstrap模式

1 个答案: