Question

我在jQuery上遇到了一些问题。我的html中有一些load（）脚本，它们加载了一些其他的片段html部分，如下所示：

<div id="container">
        ...Some html data here.... 
</div>

$(document).ready(function() {
$( "#container" ).load( "newpage.html") 
});

另外，在newpage.html中，我也有一些jQuery load（）函数。

所以，我的问题是，当我直接在firefox浏览器上运行网页时，它工作正常。但是，当我在localhost上运行它时，首先它将加载newpage.html而不会出现错误但是newpage.html中的jquery将无法正常工作。我尝试在某些js代码行上使用alert，我发现它没有执行。如果我直接在Firefox中打开它会执行它（但不能在chrome或IE中工作）。另外，使用firebug，我发现newpage.html已成功加载为响应。重要的是，我尝试从页面中删除jquery-1.11.3.min.js导入，我仍然发现jQuery代码在localhost中运行，但是当它直接在firefox上作为文件打开时它将无法工作。也许，这似乎是一些缓存问题。有人可以帮我确定一下我的问题吗？感谢!!!

代码片段（只在firefox上直接打开时才能正常工作，但不能在localhost上工作。这里，当在localhost中执行example.html时，它会得到tab1.html。所以，我保证jquery import工作正常但是，在导入tab1.html之后，当我点击选项卡列表时，我无法导航。注意：在firefox浏览器中直接执行时，所有操作都正常工作。）

更新：立即工作。 example.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>

Answer 1

请务必注意，主页中已发生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>

为什么jQuery在firefox上作为文件直接打开但在XAMPP服务器上不能正常工作？

1 个答案: