jQuery On function for future elements?

Question

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});

is this syntax is for tr's which are already on the Page ?

and if not , What is the syntax for future tr's elements ?

David Hellsing · Accepted Answer · 2011-12-08T15:51:31.653

55

For future elements inside #dataTable tbody, your code should work. To delegate the click all the way up to the document, allowing the same handler for future <tr> anywhere on the page, try:

$(document).on("click", "tr", function(event){
    alert($(this).text());
});

edited Dec 08 '11 at 15:51

answered Dec 08 '11 at 12:50

David Hellsing

97,234
40
163
203

so what youre saying is that the "on" is also for current and future dom ? – Royi Namir Dec 08 '11 at 12:53
5

Yes, as long as the inserted element is inside the element that bound the event. – David Hellsing Dec 08 '11 at 14:52
Exactly what i needed. I love you – Reign.85 May 22 '14 at 15:45
i upvoted this. but is there a way i can delegate click to more than one element same function – Ashikodi Apr 07 '16 at 14:46
Thanks helped with my colege homework very much!!! – Fabian Andiel May 20 '20 at 18:52

score 5 · Answer 2 · answered Sep 03 '13 at 01:44

Adding to Davids accepted answer, you can also use this solution to bind multiple events to a selector as well as all future matching elements.

For example an input element.

$(document).on({
    focus:function(){
        alert($(this).val());
    },
    blur: function(){
        alert($(this).val());
    }
}, 'input[type=text]');

score 1 · Answer 3 · answered Dec 08 '11 at 12:38

1

This will handle all <tr>s, no matter when they were created, but only within the currently-existing #dataTable tbody.
It's equivalent to .delegate.

answered Dec 08 '11 at 12:38

SLaks

800,742
167
1,811
1,896

So there is no difference anymore between "already in dom" vs "will be in dom" ? – Royi Namir Dec 08 '11 at 12:39
There are still differences but delegate(), live() and on() can handle both. – Stefan Dec 08 '11 at 12:42
@Stefan since 1.7 I should not use live anymore and delegate is like on.... so there is no difference anymore ......right? – Royi Namir Dec 08 '11 at 12:46
You´re right, you shouldn´t use `live()` since 1.7 but `delegate()` and `on()` can handle a modified DOM which `click()` doesn´t. – Stefan Dec 08 '11 at 13:38
@RoyiNamir there is a difference. Using syntax like `$('.container elem').on('click', function(){})` is only for current elements. Using syntax like `$('.container').on('click', 'elem', function(){})` handles future elements as well. – Gavin Oct 05 '15 at 22:11

DKSan · Answer 4 · 2011-12-08T12:43:18.523

0

~~You have to use jQuery'S .live() for future elements~~

Wrong, as this is jQuery 1.7 (and i was to fast in posting my answer).

.on() works for all (future) elements.

edited Dec 08 '11 at 12:43

answered Dec 08 '11 at 12:38

DKSan

4,026
3
22
34

It's deprecated in 1.7 instead you have [`.on()`](http://api.jquery.com/on/) – Shadow The Vaccinated Wizard Dec 08 '11 at 12:41
Well, thats right, have just seen the "deprecated" on jQuery site – DKSan Dec 08 '11 at 12:41

Stefan · Answer 5 · 2011-12-08T13:35:05.303

From api.jquery.com/on/

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one()

and from api.jquery.com/live/

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

jQuery On function for future elements?

5 Answers5