jQuery .on() method doesn't see new elements

Question

I'm getting a JSON element and building a list from its items like this:

getTitles: function(data) {
    data = data || {};
    var list = [];

    $.getJSON(
        '/titles',
        data,
        function(data) {
            $.each(data.data, function(key, val) {
                list.push(
                    '<li><a href="'+ val.href +'">'+ val.title +'</a><span class="count">'+ val.count +'</span></li>'
                )
            });

            $('#title-items').html(list.join(''));
        }
    );
}

And I'm binding click event for a elements like this:

$('a').on('click', function(e) {
    alert('clicked');
    e.preventDefault();
});

Old a elements shows alert but new ones follow URL. Event handler doesn't work for new ones. How can I solve this?

From the [jQuery doco for `.on()`](http://api.jquery.com/on/): "Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time." — nnnnnn, Dec 27 '11 at 23:54
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Heretic Monkey, May 04 '20 at 16:23

alex · Accepted Answer · 2011-12-27T23:49:21.230

146

You are not using the correct code to get live functionality.

$('#title-items').on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});

First, select your common ancestor element (#title-items in this example). You can use document here too if you want to handle all a elements.
Pass the event type (on), then the sub selector (a), and then the callback function for the event.

Now, when click events bubble up to #title-items, it will check to see if the element is an a element, and if so, fire the callback.

edited Dec 27 '11 at 23:49

answered Dec 27 '11 at 23:43

alex

479,566
201
878
984

5

@cnkt: Use `document` for your common ancestor element. – alex Dec 27 '11 at 23:47
@cnkt: You have to use jQuery >= 1.7 to use `.on()`. – Interrobang Dec 27 '11 at 23:47
2

@alex is this very unpractical? I mean, if I attached this event on the document, then it will triggers this function on every click as you said. :?:?:? – gotqn Aug 31 '12 at 10:05
@gotqn I think you could probably restrict this a little bit so it doesn't attach to every anchor using the
... `$('#title-items').on('click', 'li a', function(e) { alert('clicked'); e.preventDefault(); });`

Kevin

Jan 04 '13 at 00:46

Jasper · Answer 2 · 2011-12-28T00:01:15.067

14

You want to use event delegation to capture events triggered on events that are present in the DOM at any point in time:

$(<root element>).on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});

UPDATE - In this example the <root element> is an ancestor of the links to which you are binding that is present in the DOM at the time of binding.

The basic idea is that since we can't attach an event handler to a DOM element not yet in the DOM, we attach the event handler to an ancestor element and wait for the event to bubble up to the ancestor element. Once the event reaches the ancestor event the event.target property is checked to see what was the originally clicked element.

edited Dec 28 '11 at 00:01

answered Dec 27 '11 at 23:45

Jasper

75,717
14
151
146

1

@Gabe I don't have any idea what the user's HTML structure looks like so this is a demonstration of the general idea. Also `.live()` is depreciated, so I wouldn't use it in an example. – Jasper Dec 27 '11 at 23:48
1

@Jasper: `live()` was never really appreciated! I think you mean *deprecated* :P – alex Dec 27 '11 at 23:50
@Gabe Doesn't that depend on how nested the elements are? – Jasper Dec 27 '11 at 23:50
@Jasper, yes it would depend on how it's nested, I will remove the downvote, if you edit your answer, since it won't let me until do you do... I just think that could potentially lead to bad practice with this example. The other answer demonstrated a better practice. – Gabe Dec 27 '11 at 23:56
@Gabe That's a good idea, I went more generic than the other answer. – Jasper Dec 28 '11 at 00:02

Uzair Farooq · Answer 3 · 2016-01-22T06:24:51.673

1

You can use the arrive.js library (it uses MutationObserver internally).

document.arrive('a', function(){
    // 'this' refers to the newly created element
    var newElem = this;
});

edited Jan 22 '16 at 06:24

answered Feb 26 '15 at 06:00

Uzair Farooq

2,402
3
24
37

score 0 · Answer 4 · answered Jan 02 '21 at 07:39

In regards to the accepted answer, note that if you'll use a as a jQuery object vs a string - if you'll make a mistake in the jQuery selector - the event will always be fired when #title-items is clicked ( no matter of a / p etc .. )

var a_links1 = $('a');
var a_links2 = $('bla');

$('#title-items').on('click', a_links1, function(e) {
    alert('clicked');   <= fire only on <a> elements
});

$('#title-items').on('click', a_links2, function(e) {
    alert('clicked');   <= fire on every element under <#title-items>
});

That is unless you'll use strings

$('#title-items').on('click', 'a', function(e) {
    alert('clicked');   <= fire only on <a> elements
});

$('#title-items').on('click', 'bla', function(e) {
    alert('clicked');   <= won't fire at all, as the selector won't match anything
});

jsFiddle: https://jsfiddle.net/7f8y5ak6/1/

It is important to understand that, because when you're expecting $('bla') to be added in the future ( or after some click ) - but you loaded the bind event before that - jQuery's selector won't "find"/"see" them - then you're expected this behavior when everything is clickable.

score 0 · Answer 5 · answered May 05 '21 at 18:38

This one worked for me https://www.learningjquery.com/2017/02/jquery-on-method-the-issue-of-dynamically-added-elements

jQuery .on() method used as direct event will not work for dynamically added elements. Use delegate event via passing the selector parameter so that container takes the responsibility of executing the event in case of elements added in future dynamically.

You can keep .on inside or outside of $(document).ready both logs will work!

For custom tag

$(document).on("click","[mycustomtag]", function(){
    console.log("Clicked.");
});

for HTML classes or id's etc

$(document).on("click","div", function(){
    console.log("Clicked.");
});

jQuery .on() method doesn't see new elements

5 Answers5

Linked

Related