从 Bootstrap 模式按钮调用 Ajax 函数答案

【问题标题】：Invoke Ajax function from Bootstrap modal button从 Bootstrap 模式按钮调用 Ajax 函数
【发布时间】：2018-05-12 23:18:59
【问题描述】：

我希望在单击引导确认模式中的选项后调用 ajax 函数。确认模态将通过函数remove(参数)打开

任何帮助将不胜感激

function remove(parameter){
	// $("#remove-modal").modal('show');
	/*
  if( modal clicked Yes){
  ..perform ajax call using 'parameter'
  }
	*/
}

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="remove-modal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Do you want to remove this item?</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="modal-btn-si">Yes</button>
        <button type="button" class="btn btn-primary" id="modal-btn-no" data-dismiss="modal">No</button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

只需在模态按钮中添加一个监听器？
能否提供示例代码？
我用点击事件写了一个答案

标签： javascript ajax twitter-bootstrap

【解决方案1】：

您可以为“是”按钮添加一个事件侦听器。由于每次显示模式时事件都会发生变化，因此您在添加新模式之前将其删除。

remove(parameter) {
    var yesButton = $("#modal-button-si");
    yesButton.off("click");
    yesButton.click(function(){
        //perform ajax here
    });
}

【讨论】：

每次调用 remove function() 时，都会针对需要删除的不同项目，这就是为什么我想知道是否仅针对该特定项目单击了“是”模式按钮。这就是为什么我希望从删除函数（）中打开模式。谢谢
该功能仅针对该删除添加。如果您想绝对确定，您可以在模式的显示事件中删除单击的侦听器。

【解决方案2】：

我假设在显示模式后向“是”按钮添加点击处理程序应该可以工作。比如：

function remove(parameter){
    // show the dialog
    var m = $("#remove-modal").modal('show');

    // find the button in your modal, and attach an event 
    // handler to it's click event
    m.on('shown.bs.modal', function(){
        m.find('#modal-btn-si').on('click', function(e){

            // do something here...

            // When you're ready to dismiss the modal, call:
            //
            // m.modal('hide');
            //
            // Make sure this is in the callback for your
            // AJAX event, unless you want the modal dismissed
            // as soon as the button is clicked
        });
    });
}

【讨论】：