如何使用 jQuery load() 函数从容器本身的锚点加载 html？答案

【问题标题】：How to load html using jQuery load() function from the anchor inside the container itself?如何使用 jQuery load() 函数从容器本身的锚点加载 html？
【发布时间】：2016-01-15 23:31:21
【问题描述】：

如何通过单击加载函数加载新html页面的容器内的链接来实际执行加载（）函数？在下面的代码中，首先我成功地将 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。

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

【问题讨论】：

首先，id should always be unique
调用load()函数后，div“容器”内的内容将被完全替换。所以，我认为不应该有任何唯一的 id 违规。
你能做一个 sn-p 或 fiddle 吗？
我猜想JS函数与列表项的点击事件的绑定只在页面第一次加载后发生一次。因此，即使您将列表项替换为具有相同 ID 的新项，它们也不会将 JS 代码绑定到其单击事件，因为 jQuery 代码不会执行。
您是否在选项卡上加载任何动态内容？？

标签： javascript jquery

【解决方案1】：

更新：谢谢你们的cmets和想法。但是，我碰巧想出了一种解决方案，并且似乎非常适合我的情况。感谢@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" );
    });
});

现在它工作了。！！！

【讨论】：