引导模式事件不触发

Question

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

这是我的模态

<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>'

我正在使用引导程序 3.3 和 jQuery v1.11.2

让我知道是否有更多信息有助于解决问题 提前致谢

Answer 1

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

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

Answer 2

代码触发模式和警报。你记得包括JQuery吗？

试试这个代码笔演示

<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>

Answer 3

在这里，您可以使用解决方案 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文件。