Interact with content added with jQuery

Question

I have a simple example

    <div id="test">add more text</div>

When you click on this text

    jQuery('#test').on('click', function (event) {
        $('body').append("<div id='newtest'>new test</div>");
    });

you get some more text appear. After I have clicked on 'add more text' my page looks like this

<div id="test">add more text</div>
<div id="newtest">new test</div>

I am wondering what I need to do to interact with the newtest div?

If I put the below in.

jQuery('#newtest').on('click', function (event) {
    alert('not working?');
});

Nothing happens. How do I interact with content that gets added after load? I thought .on helped me do this?

Did you put that after appending or before? – PSL Dec 10 '13 at 21:34 — PSL, Dec 10 '13 at 21:34
You need to use event delegation. – dsgriffin Dec 10 '13 at 21:34 — dsgriffin, Dec 10 '13 at 21:34
@Zyga No, live() was deprecated in 1.7 and removed in 1.9. – dsgriffin Dec 10 '13 at 21:37 — dsgriffin, Dec 10 '13 at 21:37
Live() is deprecated and has been replaced by .on() – HaukurHaf Dec 10 '13 at 21:37 — HaukurHaf, Dec 10 '13 at 21:37

score 3 · Accepted Answer · answered Dec 10 '13 at 21:46

The reason why you need to use $(document).on() instead of $('#newtest').on() is because #newtest is a new element that you have injected into the DOM.

You must now use .on() ) against an higher element that was originally in the DOM, in order to attach an event handler to the newly injected element.

Thus:

jQuery(document).on('click', '#newtest', function (event) {
    alert('This will work now');
});

score 1 · Answer 2 · answered Dec 10 '13 at 21:36

1

You need to apply your click handler to the document.

jQuery(document).on('click', '#newtest', function (event) {
    alert('not working?');
});

Hope this helps! :)

answered Dec 10 '13 at 21:36

wrxsti

3,289
1
16
29

score 1 · Answer 3 · answered Dec 10 '13 at 21:36

1

put the event on your document instead of an element

jQuery(document).on('click', '#newtest', function (event) {
    alert('not working?');
});

answered Dec 10 '13 at 21:36

Gotschi

3,165
2
23
21

score 0 · Answer 4 · edited Dec 10 '13 at 21:48

0

Set the .on() event to a parent element, such as the body and delegate it to the newtest div.

jQuery('body').on('click', '#newtest', function (event) {
    alert('Working!');
});

edited Dec 10 '13 at 21:48

Nagendra Rao

6,716
5
48
88

answered Dec 10 '13 at 21:36

HaukurHaf

12,968
5
40
56

Interact with content added with jQuery

4 Answers4