jQuery On function for future elements? [duplicate]

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 ?

Answer 1

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

Answer 2

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]');

Answer 3

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.