javascript - 如何使用 jQuery load() 函数从容器本身内部的 anchor 加载 html？

Question

如何通过单击 load 函数加载新 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 的选项卡导航)后，我无法导航到选项卡 1 或选项卡 3。

那么，有人请告诉我如何实现这一目标吗？

Answer 1

更新: 感谢大家的评论和想法。然而，我碰巧找到了一种解决方案，它似乎非常适合我的情况。感谢 @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" );
    });
});

现在它可以工作了。!!!