JQuery not selecting added Elements

Question

I found this example: http://jsfiddle.net/jaredwilli/tZPg4/4/

$('#addScnt').live('click', function () {
    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
});

$('#remScnt').live('click', function () {
    if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }
    return false;
});

, and when I'm trying to replicate the result and try the created <a> are not selected by jQuery

My Fiddle: http://jsfiddle.net/sonicdeadlock/y3ACz/

$(".addItem").on("click", function () {
    var newInput = $('<p><input type="text" class="item" placeholder="item"></input><a href="#" class="removeItem">remove</a></p>');
    $(this).closest(".category").append(newInput);
});

$(".removeItem").on("click", function () {
    $(this).closest("p").remove();
});

and [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/questions/12829963/events-triggered-by-dynamically-generated-element-are-not-captured-by-event-hand) — Felix Kling, Nov 30 '13 at 02:19
and [Turning live() into on() in jQuery](http://stackoverflow.com/q/8021436/218196) — Felix Kling, Nov 30 '13 at 02:20

score 1 · Accepted Answer · answered Nov 30 '13 at 02:13

You're adding items, therefore you need to use event delegation:

$(document).on("click", ".removeItem", function() {

The reason being is that these handlers are bound at run, and at run, these new elements don't exist. Bind them to something that does. As for the working example you found, it uses .live. .live used to be used for this but was replaced with .on in later versions of jQuery

charlietfl · Answer 2 · 2013-11-30T02:19:29.537

on() has different syntax for delegation than the deprecated live() method does.

You first have to use a selector for an element, or the document itself that is a permanent asset of page, and is an ancestor of elements you want to target

Like:

$('.category').on('click', '.addItem',function(){
  /* handler code*/
})

OR

$(document).on('click', '.removeItem',function(){
  /* handler code*/
})

WHen elements are always in page you can use on() with the element as selector using the syntax you currently have.

Thus there are two different ways to use on()

API docs for on()

score 0 · Answer 3 · answered Nov 30 '13 at 02:14

Move your selector out to a parent that doesn't get replaced, and then filter down to the dynamic element(s):

$('body').on("click", ".addItem", function(){
    // your stuff here...
});

If you have something more specific than "body", I'd recommend using that instead.

score 0 · Answer 4 · answered Nov 30 '13 at 02:14

0

Use .on() as live() is deprecated

Read Event Delegation.

$(document).on("click", ".removeItem", function() { ..code here.. });

Syntax

$( elements ).on( events, selector, data, handler );

answered Nov 30 '13 at 02:14

Tushar Gupta - curioustushar

58,085
24
103
107

JQuery not selecting added Elements

4 Answers4