将jquery绑定到动态加载的内容 [英] binding jquery to dynamically loaded content

问题描述

我有以下html树:

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

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

I am using ajax to load the following content into #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如下所示:

which happens successfully, and the resulting HTML looks like this :

<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>

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

Now I want to click on the dynamically loaded link to load the following content :

<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看起来像这样:

so that the final HTML looks like this :

<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绑定到动态加载的内容.因此，我执行以下操作:

I have heard that I should use on() to bind jquery to a dynamically loaded content. So I do the following:

('#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

Ques1: Is this the correct usage of on() ? Because when I click the link, I don't get alert 1 on the screen and the page simply navigates to whoweare.php

问题2 :如果我确实能收到警报，从理论上讲，是否可以单击加载了内容的链接来代替最初单击的链接?

Ques2: Incase I do manage to get the alert, is it possible theoritically to click on a link that loads content that replaces the link clicked in the first place ?

推荐答案

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

Ques1: Is this the correct usage of on() ? Because when I click the link, I don't get alert 1 on the screen and the page simply navigates to whoweare.php

• 您缺少美元符号:$并使用document您将相同的ID绑定到不正确的相同ID上，如果您更愿意:&如果您更想知道为什么.on 出了什么问题jQuery live方法?

• you are missing a dollar sign: $ and use document you are binding same id on same id which is not correct, further if you keen: What is the meaning of "$" sign in javascript & If you are more keen to know why .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::如果我确实能收到警报，从理论上讲，是否可以单击加载了内容的链接来代替最初单击的链接?

Ques2: Incase I do manage to get the alert, is it possible theoritically to click on a link that loads content that replaces the link clicked in the first place ?

• 这可能会帮助您: jQuery如何替换src url

这篇关于将jquery绑定到动态加载的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！