gpt4 book ai didi

javascript - Bootstrap 模式不会显示

转载 作者:行者123 更新时间:2023-11-29 21:48:54 26 4
gpt4 key购买 nike

我正在尝试让 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”。 “加载”函数通过 AJAX 加载“内容”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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com