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绑定到动态加载的内容。所以我做了以下几点：

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

Ques1 ：这是on()的正确用法吗？因为当我点击该链接时，我在屏幕上看不到alert 1，而该页面只是导航到whoweare.php

Ques2 ：我确实设法获取提醒，是否可以通过点击加载内容的链接来替换首先点击的链接？

Answer 1

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

您错过了一个美元符号：$并使用document您在相同的ID上绑定相同的ID，这是不正确的，如果您热衷于What is the meaning of "$" sign in javascript＆amp;如果您更想知道为什么.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

Answer 2

问题1

你的绑定语句应该是：

$(document).on("click", "#section1 #content-wrap1 #content a", function() {
    ...
});

请注意，我们现在绑定到document对象，以容纳与动态或其他方式加载的第二个选择器（#section1 #content-wrap1 #content a）匹配的所有元素。

另外，请注意第二个选择器中的校正（空格）。

问题2

是否可以通过理论上点击加载内容的链接来替换首先点击的链接？

是。完全。

将jquery绑定到动态加载的内容

2 个答案: