如何将此 html 脚本应用于 jQuery？

Question

我有一个属性为data-toggle 和data-target 的按钮。这是完整的按钮脚本：

<button style="width:50%; float:left" type="button" class="btn btn-info" id="btn_report" data-toggle="modal" data-target="#myModal">Detail</button>

这个按钮打开一个简单的模式。模态框也可以通过在模态框外单击来关闭。但是，我想在使用 jQuery 的按钮中有一些规则。

$('#btn_report').on('click',function(e){
    var dataSend    = "some_data";
    $.ajax({
        type: "POST",
        url: "some_function",
        cache: false,
        dataType : "json",
        data: dataSend,
        success: function(response) {
           if(response){
               $('#myModal').show();
           }else{ 
               alert("There are no data to be displayed"); return false; 
           }
        }
   })
});

使用data-toggle 和data-target，每当我单击按钮时，总是会打开模式。如果我删除data-toggle 和data-target 并添加$('#myModal').show();，则不会显示模式。

如果有从 ajax 返回的数据，我想做的是打开模式。如果没有，则触发警报。

模态很简单：

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog"> 
    <!-- Modal content-->
    <div class="modal-content" id="printMe">
        <div class="modal-body"> Congrats, you have your data </div>
    </div>
  </div>
</div>

Answer 1

当您使用引导模式时，您需要使用modal('open')，而不是show()。试试这个：

if (response) {
  $('#myModal').modal('show');
} else { 
  alert("There are no data to be displayed"); 
}

另请注意，return 是多余的，因为您无法从异步 success 处理函数中返回任何内容。

Answer 2

在点击监听器中添加 event.stopPropagation()

$('#btn_report').on('click',function(e){
    event.stopPropagation();
    setTimeout(function() {
        // ajax mock
        $('#myModal').modal('show');
    }, 2000);
});