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?

circuitry · Accepted Answer · 2014-01-12 07:19:19Z

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, 2014 at 7:19

circuitry

1,18916 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dorian Over a year ago

Thank you, thanks to this, I can bind events on my Angular generated elements

You · Accepted Answer · 2010-08-02 21:46:43Z

3

The jQuery live() function does this:

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

answered Aug 2, 2010 at 21:46

You

24k3 gold badges55 silver badges67 bronze badges

2 Comments

Juzer Ali Over a year ago

live is deprecated, how can I achieve it through on?

tehfoo Over a year ago

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

Bertrand Marron · Accepted Answer · 2010-08-02 21:58:36Z

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 2, 2010 at 21:58

answered Aug 2, 2010 at 21:45

Bertrand Marron

22.3k8 gold badges63 silver badges95 bronze badges

1 Comment

w3bshark Over a year ago

live() is deprecated now. Use on(). See this answer: stackoverflow.com/a/8191450/1738090

Ashisha Nautiyal · Accepted Answer · 2014-01-12 07:24:00Z

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

You are need to use live.

Collectives™ on Stack Overflow

Binding events to not yet created DOM elements (jquery)

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Linked

Related