如何使用jQuery加载html加载()函数从锚在容器本身

How to load html using jQuery load() function from the anchor inside the container itself?

本文关键字：加载 函数 jQuery 何使用 html      更新时间：2023-09-26

如何通过点击加载函数加载新html页面的容器内的链接来实际执行load()函数?在下面的代码中，首先我成功地将new.html页面放入容器div中。

<div id="container">
    <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>
        ...Some html data here.... 
</div>
$(document).ready(function() {
    $("#t1").click(function(){
        $( "#container" ).load( "tab1.html" );
    });
});
$(document).ready(function() {
    $("#t1").click(function(){
        $( "#container" ).load( "tab2.html" );
    });
});
$(document).ready(function() {
    $("#t1").click(function(){
        $( "#container" ).load( "tab3.html" );
    });
});

这里tab1.html, tab2.html和tab3.html也将包含相同的标签导航列表，具有相同的id，但具有不同的数据。

    <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>
   ...different data here.....

现在，每当我第一次执行页面时，我可以轻松地加载三个页面中的任何一个(tab1或tab2或tab3)。但是，加载这些页面后，我无法加载另一个页面。例如，加载tab2后，它也将包含具有相同id的选项卡导航，我无法导航到tab1或tab3。

所以，谁能告诉我怎么才能做到这一点?

更新:感谢大家的评论和想法。然而，我碰巧想出了一个解决方案，似乎对我的情况非常有效。感谢@HristoIliev指出如何重新验证jQuery load()函数。我所做的就是简单地将jQuery load()函数片段集添加到片段html即(tab1.html, tab2.html和tab3.html)。例如:

tab1.html
<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>
   ...different data here.....
...added jQuery load funciton and which will again revalidate the jQuery code when this fragment html is loaded in the main div "container".
$(document).ready(function() {
    $("#t2").click(function(){
        $( "#container" ).load( "tab1.html" );
    });
});
$(document).ready(function() {
    $("#t3").click(function(){
        $( "#container" ).load( "tab1.html" );
    });
});

现在它工作了!!

相关文章：