jquery - 将 jquery 绑定(bind)到动态加载的内容

Question

我有以下 html 树:

<div class="section yellow" id="section1">
    <div id="content-wrap1" class="content-wrap">
</div>

我正在使用ajax将以下内容加载到#content-wrap1中:

<div id="content">
    <a href="whoweare.php">Who we are</a>
    <a href="whatwedo.php">Our team</a>
    <p>ABOUT US : Dance is a type of art</p>
</div>

成功发生，生成的 HTML 如下所示:

<div class="section yellow" id="section1">
    <div id="content-wrap1" class="content-wrap">.
        <div id="content">
        <a href="whoweare.php">Who we are</a>
        <a href="whatwedo.php">Our team</a>
        <p>ABOUT US : Dance is a type of art</p>
    </div>
</div>

现在我想点击动态加载的链接来加载以下内容:

<div id="content">
    <a href="whoweare.php">Who we are</a>
    <a href="whatwedo.php">Our team</a>
    <p>Hi there! How are you?</p>
</div>

最终的 HTML 看起来像这样:

<div class="section yellow" id="section1">
    <div id="content-wrap1" class="content-wrap">.
        <div id="content">
        <a href="whoweare.php">Who we are</a>
        <a href="whatwedo.php">Our team</a>
        <p>Hi there! How are you?</p>
    </div>
</div>

我听说我应该使用 on() 将 jquery 绑定(bind)到动态加载的内容。所以我执行以下操作:

('#section1').on("click", "#section1#content-wrap1#content a", function(){
    alert("1");
    toLoad = $(this).attr('href')+' #content';
    $('content-wrap1').load(toLoad);
}

问题1:这是 on() 的正确用法吗？因为当我点击链接时，屏幕上没有显示 alert 1，页面只是导航到 whoweare.php

问题2:如果我确实设法收到警报，理论上是否可以单击加载内容的链接来替换首先单击的链接？

Answer 1

问题1:这是 on() 的正确用法吗？因为当我点击链接时，我没有在屏幕上看到警报 1，页面只是导航到 whoweare.php

• 您缺少美元符号:$ 并使用document 您将相同的 id 绑定(bind)到同一个 id 上，这是不正确的，如果您愿意的话，进一步:What is the meaning of "$" sign in javascript & 如果您更想知道为什么 .on What's wrong with the jQuery live method?

代码

$(document).on("click", "#content a", function(){
        alert("1");
        toLoad = $(this).attr('href')+' #content';
        $('content-wrap1').load(toLoad);
})

问题2:如果我确实设法收到警报，理论上是否可以单击加载内容的链接来替换首先单击的链接？

• 这可能会帮助您:jQuery how to replace src url