我正在尝试让 Bootstrap 模式正常工作。在index.php 中，我有一些链接将加载页面PageOne.php 和PageTwo.php。
在 PageOne.php 中，我尝试使用 #LinkToModal 调用模式，但模式不会显示。我正在使用 Chrome，当单击按钮时，我什至看不到控制台中的某些内容发生变化。
这是我的代码: 索引.php
<html>
<head>
<!-- Javascript -->
<script src="inc/bootstrap-assets/js/jquery-1.10.2.js"></script>
<script src="inc/bootstrap-assets/js/bootstrap.js"></script>
<script src="inc/js/functions.js"></script>
</head>
<body>
<h2>Home</h2>
<a href="" id="LinkToPageOne">Link To Page One</a>
<a href="" id="LinkToPageTwo">Link To Page Two</a>
<div id="Content">something</div>
</body>
<!-- BOOTSTRAP SCRIPTS -->
</html>
PageOne.php
<div id="PageOne">
<button id="LinkToModal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">Large modal</button>
</div>
<div id="Modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
函数.js
$(document).ready(function () {
$("#LinkToPageOne").click(function () {
$("#Content").load("inc/content/PageOne.php #PageOne");
return false;
});
$("#LinkToPageTwo").click(function () {
$("#Content").load("inc/content/PageTwo.php");
return false;
});
$("#LinkToModal").click(function(){
$("#Modal").modal("show");
});
});
最佳答案
您的问题是，当您的页面甚至还没有加载时，您就太早地将点击处理程序分配给“#LinkToModal”。 “load”函数通过 AJAX 加载“content”div 内的 html。因此，您应该在加载点击处理程序后对其进行分配。 “load”函数会给您一个回调，您可以在其中添加此处理程序。
$(document).ready(function () {
$("#LinkToPageOne").click(function () {
$("#Content").load("inc/content/PageOne.php #PageOne",function(){
$("#LinkToModal").click(function(){
$("#Modal").modal("show");
});
});
return false;
});
});
or
您可以使用'on ' 函数来分配点击处理程序，这会将其添加到分配处理程序后添加的任何 dom 中。只要记住将其分配给准 parent 即可。例如:
$("#Content").on('click','#LinkToModal',function(){
$("#Modal").modal("show");
});
关于javascript - Bootstrap 模式不会显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30145047/