我在 jQuery 上遇到一些问题。我的 html 中有一些 load() 脚本，它们加载一些其他片段 html 部分，如下所示:
<div id="container">
...Some html data here....
</div>
$(document).ready(function() {
$( "#container" ).load( "newpage.html")
});
此外，在 newpage.html 中，我还有一些 jQuery load() 函数。
所以，我的问题是，当我直接在 Firefox 浏览器上运行网页时，它工作正常。但是，当我在本地主机上运行它时，首先它会毫无错误地加载 newpage.html 但 newpage.html 中的 jquery 将无法工作。我尝试在某些 js 代码行上使用警报，但发现它没有执行。如果我直接在 Firefox 中打开它，它将执行(但在 chrome 或 IE 中不起作用)。此外，使用 firebug，我发现 newpage.html 已成功加载为响应。 重要的是，我尝试从页面中删除 jquery-1.11.3.min.js 导入，但我仍然发现 jQuery 代码在 localhost 中运行，但在 Firefox 上直接作为文件打开时它将无法工作。也许，这似乎是一些缓存问题。 谁能帮我确定我的问题吗？ 谢谢!!!
code snipset(仅在直接打开时在 firefox 上正常工作，但在 localhost 上不起作用。这里，在 localhost 中执行 example.html 时，它将获取 tab1.html。所以，我确信 jquery import 工作正常。但是，导入tab1.html后，当我点击选项卡列表时，我无法导航。注意:在firefox浏览器中直接执行时，所有操作都工作正常。)
更新:现在正在工作。 示例.html
<html>
<h2>Main page header </h2>
<div id="container" style="height:auto;width:auto"> </div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
$( "#container" ).load( "tab1.html");
});
</script>
</html>
tab1.html
<html>
<div>
<ul>
<li><a id="t1" href="#">tab1</a></li>
<li><a id="t2" href="#">tab2</a></li>
<li><a id="t3" href="#">tab3</a></li>
</ul>
<h2>this is tab1 </h2>
</div>
<script>
$(document).ready(function() {
$("#t1").click(function(){
$( "#container" ).load( "tab1.html" );
});
});
$(document).ready(function() {
$("#t2").click(function(){
$( "#container" ).load( "tab2.html" );
});
});
$(document).ready(function() {
$("#t3").click(function(){
$( "#container" ).load( "tab3.html" );
});
});
</script>
</html>
tab2.html
<html>
<div>
<ul>
<li><a id="t1" href="#">tab1</a></li>
<li><a id="t2" href="#">tab2</a></li>
<li><a id="t3" href="#">tab3</a></li>
</ul>
<h2>this is tab2 </h2>
</div>
<script>
$(document).ready(function() {
$("#t1").click(function(){
$( "#container" ).load( "tab1.html" );
});
});
$(document).ready(function() {
$("#t2").click(function(){
$( "#container" ).load( "tab2.html" );
});
});
$(document).ready(function() {
$("#t3").click(function(){
$( "#container" ).load( "tab3.html" );
});
});
</script>
</html>
tab3.html
<html>
<div>
<ul>
<li><a id="t1" href="#">tab1</a></li>
<li><a id="t2" href="#">tab2</a></li>
<li><a id="t3" href="#">tab3</a></li>
</ul>
<h2>this is tab3 </h2>
</div>
<script>
$(document).ready(function() {
$("#t1").click(function(){
$( "#container" ).load( "tab1.html" );
});
});
$(document).ready(function() {
$("#t2").click(function(){
$( "#container" ).load( "tab2.html" );
});
});
$(document).ready(function() {
$("#t3").click(function(){
$( "#container" ).load( "tab3.html" );
});
});
</script>
</html>
最佳答案
需要注意的是，document.ready 已经在主页中发生了。
新加载的页面中依赖于 document.ready 的任何脚本都会立即触发。
如果该脚本放置在其目标元素之前，则不会找到这些元素。将脚本移至 newPage.html 的末尾，以便在这些元素存在后运行，使其正常工作。
加载后将失败的 newPage.html 示例:
<script>
$(document).ready(function(){
// will run before the element below exists
$('#test').text('Some new text');
})
</script>
<div id="test"></div>
但是颠倒顺序就会使它起作用:
<div id="test"></div>
<script>
$(document).ready(function(){
// element above exists so text will be changed in it
$('#test').text('Some new text');
})
</script>
关于javascript - 为什么 jQuery 在 Firefox 上直接作为文件打开时可以工作，但在 XAMPP 服务器中却不能工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33186295/