jQuery created Class not DOM functional

Question

Here's a jsFiddle test --> http://jsfiddle.net/rTXkM/

I have a button that adds a table row to my table:

var x = "<tr><td><button class='del'> - </button></td></tr>";
$('#mytable').append(x);

I also have a jQuery function that operates according to class:

$('.del').click(function() {
   ......................
   ......................
   ......................
});

However, the 'del' class click function does not work on DOM created Elements... Can someone help?

jsFiddle --> http://jsfiddle.net/rTXkM/

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jason P, Sep 04 '13 at 19:38

Sergio · Accepted Answer · 2013-09-04T19:39:50.083

4

You need to delegate like this $(document).on('click','.del',function() {

Demo here

Because your .del elements were not there when the listener was run (inside your .ready() function), the element did not get a event attached to it. So you need to delegate to something that was there before to be able to catch the click on that element.

You can read more at jQuery's documents: .on()

edited Sep 04 '13 at 19:39

answered Sep 04 '13 at 19:33

Sergio

28,539
11
85
132

Good answer and a little bit faster than me ;) +1 – Martin Sep 04 '13 at 19:40
Thanks, I've been training my fingers! good answer you too :) – Sergio Sep 04 '13 at 19:40

score 2 · Answer 2 · answered Sep 04 '13 at 19:35

2

Use

$(document).on("click", '.del', function() {
   alert('I work now');
}

and it will work. jQuery Documentation

answered Sep 04 '13 at 19:35

Martin

3,096
1
26
46

jQuery created Class not DOM functional

2 Answers2