Binding Events to AJAX added elements

Question

I know that this question has been asked before,but unfortunately those didn't seem to solve my issue. I have a <table> and i have to add dblclick event to each of those,but i also am adding rows to the table using AJAX(after page load).

I have got it working but have posted 2 codes,one worked and other didn't.

a)This code works for me:

$(document).on("dblclick","td",function(){ 
   //THIS WORKS FOR ELEMNTS ADDED AFTER PAGE LOAD
});

b)This code i tried earlier that didn't work:

$("td").on("dblclick","td",function(){ 
   //THIS DIDN'T FOR ELEMNTS ADDED AFTER PAGE LOAD

});

Even tried adding a class to newly added <td> and passed it in the second parameter,but it didn't seem to work.

Anyone please explain,whats the problem in the second case.?

very related: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Michael Doye, Jun 24 '15 at 17:26

Felix Kling · Accepted Answer · 2015-06-24T17:30:03.323

2

Anyone please explain,whats the problem in the second case.?

You are saying "Even tried adding a class to newly added <td>" which implies that you are creating new <td> elements.

The event handler has to be bound to an existing, "static" ancestor of the elements that are dynamic.

Your handler, $("td").on("dblclick","td",function() {}) doesn't make much sense. It would listen to clicks on table cells inside other table cells.

Have a look at the jQuery tutorial Understanding Event Delegation to learn more about event delegation.

edited Jun 24 '15 at 17:30

answered Jun 24 '15 at 17:23

Felix Kling

705,106
160
1,004
1,072

But the second parameter is for elements that will be added in the future right? – Varun Jun 24 '15 at 17:24
Yes.... that's why it doesn't make a lot of sense to use the same selector in both cases. – Felix Kling Jun 24 '15 at 17:26
King So had i used to bind it to `` and used `$("tbody").on("dblclick","td",function() {})` ,it would have worked? – Varun Jun 24 '15 at 17:26
1

@varun: Yes, on every single inside a . – briosheje Jun 24 '15 at 17:28
@FelixKling Thanks mate, i guess existing ancestor was the thing i was missing – Varun Jun 24 '15 at 17:30
@briosheje Thanks mate! I guess ancestor was the concept i was missing. – Varun Jun 24 '15 at 17:31

Binding Events to AJAX added elements

1 Answers1