Binding events to not yet created DOM elements (jquery)

Question

How do I bind events to html elements that don't exist at the time of the script loading?

One part of my script adds these to the DOM:

<a class="btn-remove-item" href="">link</a>

The problem is I can't just do:

$(document).ready(function(){

    $(".btn-remove-item").click(function(){
        this.parentNode.removeChild(this);
    });
});

.. I think because the DOM element isn't there when the page first loads.

How should I bind the event to myClass?

score 26 · Accepted Answer · answered Jan 12 '14 at 07:19

26

jQuery.live() has been deprecated. Here is the accepted answer using jQuery.on() instead:

$(document).on('click', '#btn-remove-item', function() {
    this.parentNode.removeChild(this);
});

answered Jan 12 '14 at 07:19

circuitry

Thank you, thanks to this, I can bind events on my Angular generated elements – Dorian Mar 20 '14 at 17:09

score 3 · Answer 2 · answered Aug 02 '10 at 21:46

3

The jQuery live() function does this:

$("#btn-remove-item").live('click', function() {
    this.parentNode.removeChild(this);
});

answered Aug 02 '10 at 21:46

You

1

live is deprecated, how can I achieve it through `on`? – Juzer Ali Apr 23 '13 at 14:50
2

you can use 'on', just select via `document` and use the selector argument of 'on' to get the right element. e.g. `$(document).on( 'click', '#someThingCreatedLater', function (event) { ... do stuff ...});` – tehfoo May 13 '13 at 22:27

Bertrand Marron · Answer 3 · 2010-08-02T21:58:36.010

1

jQuery.live() is what you need.

$(document).ready(function(){

    $("a.myClass").live('click', function() {
        this.parentNode.removeChild(this);
    });
});

Try it out: http://jsfiddle.net/mwR8g/

edited Aug 02 '10 at 21:58

answered Aug 02 '10 at 21:45

Bertrand Marron

1

`live()` is deprecated now. Use `on()`. See this answer: http://stackoverflow.com/a/8191450/1738090 – w3bshark May 15 '13 at 13:31

score -1 · Answer 4 · answered Jan 12 '14 at 07:24

-1

$(document).ready(function(){
     $(".btn-remove-item").live('click', function() {
        this.parentNode.removeChild(this);
    });
});

You are need to use live.

answered Jan 12 '14 at 07:24

Ashisha Nautiyal

4 Answers4