binding jquery to dynamically loaded content

Question

I have the following html tree :

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

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>

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>

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>

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);
}

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

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 ?

score 7 · Accepted Answer · edited May 23 '17 at 12:00

7

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

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?

Code

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

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 ?

this might help you out: jQuery how to replace src url

edited May 23 '17 at 12:00

Community

1
1

answered Oct 28 '12 at 09:36

Tats_innit

33,991
10
71
77

2

+1, Good answer bro, please fix this selector `#section1#content-wrap1#content a`. – Ram Oct 28 '12 at 09:39
What's wrong with `#section1#content-wrap1#content a` as the selector? – soundswaste Oct 28 '12 at 09:47
1

@soundswaste see post above i.e. from techfoobar, further take a look in here: http://api.jquery.com/multiple-selector/ **also see in here** http://stackoverflow.com/questions/1218068/what-is-the-difference-between-jquerys-space-and-selectors `:)` – Tats_innit Oct 28 '12 at 09:50
Oh btw, I read somewhere its performance-wise better if I use the nearest parent ID (like `$('#section1')` instead of `$(document)`. Thoughts? – soundswaste Oct 28 '12 at 10:01
@soundswaste No Worried `:))` GLad it helped! no sure whta will the exact JPref numbers but one advantage of using `document` is that you can be relaxed about using new dynamic elements getting added anywhere in the DOM and `.on` will take care of it, let me know where you read about this, `:)` – Tats_innit Oct 28 '12 at 10:10

score 2 · Answer 2 · answered Oct 28 '12 at 09:35

Ques 1

Your bind statement should be like:

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

Notice that we are now binding to the document object to accomodate any and all elements matching the second selector (#section1 #content-wrap1 #content a) loaded dynamically or otherwise.

Also, notice the correction in the second selector (spaces).

Ques 2

is it possible theoritically to click on a link that loads content that replaces the link clicked in the first place ?

Yes. Totally.

binding jquery to dynamically loaded content

2 Answers2

Linked