引导模式事件不会触发答案

【问题标题】：Bootstrap modal event doesn't trigger引导模式事件不会触发
【发布时间】：2018-01-31 16:57:59
【问题描述】：

我正在尝试绑定一些代码以在我的模式打开时触发。我打开模式没有问题，但由于某种原因我无法确定我的事件没有触发。

这是我的模态

<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
            <h4 class="modal-title"></h4>
            </div>
                <div class="modal-body">
            <p id="modal-body" class="text-defualt text- text-normal text-left"></p>
        </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

这是我正在尝试运行的 JS 脚本

<script>
    $(function(){ // let all dom elements are loaded
      $("#details").on("show.bs.modal", function (e) {
          alert("event fired");
      });
    })
</script>'

我正在使用 bootstrap 3.3 和 jQuery v1.11.2

如果有更多信息有助于解决问题，请告诉我在此先感谢

【问题讨论】：

您的模式不可见，因此show.bs.modal 事件永远不会触发。如果您显示模态，它可以正常工作：jsfiddle.net/u1pdunkf

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

请尝试以下代码：假设您在单击任何按钮时打开模式弹出窗口；添加以下代码，它应该可以工作：参考这个fiddle

 <script>
    $(function(){ // let all dom elements are loaded
     $(document).on('show.bs.modal','#details', function () {
        alert('hi');
      });
    });
</script>

【讨论】：

【解决方案2】：

这里有一个解决方案https://jsfiddle.net/kxr2subr/

$(function(){ // let all dom elements are loaded
  $("#details").on("show.bs.modal", function (e) {
      alert("event fired");
  });
  
  $('button').click(function(){
  	$('#details').modal({show: true});
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button>
Open Modal
</button>

<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
            <h4 class="modal-title"></h4>
            </div>
                <div class="modal-body">
            <p id="modal-body" class="text-defualt text- text-normal text-left"></p>
        </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

我猜你缺少bootstrap.min.js 文件。

【讨论】：

【解决方案3】：

您的代码会触发模式和警报。你记得包含 JQuery 吗？

试试这个CodePen Demo

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#details">
  Launch demo modal
</button>

<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">×</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <p id="modal-body" class="text-defualt text- text-normal text-left">I work</p>
      </div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
  $(function() {
    $("#details").on("show.bs.modal", function(e) {
      alert("event fired");
    });
  });
</script>

【讨论】：