how can I bind jquery methods to htmls tags which are added after the page have been loaded?

Question

I have a button which adds rows to my table. but the property of Delete button dose work as it has been added after readyFucntion have been called

enter code here

Answer 1

Assuming the elements are all added to a common ancestor, use event-delegation with on() (in jQuery 1.7+):

$('#commonAncestorID').on('click', '.newElementsClass', function(){
    // do something when the elements with 'newElementsClass' are clicked
});

Or using delegate() (jQuery < 1.7):

$('#commonAncestorID').delegate('.newElementsClass', 'click', function(){
    // do something when the elements with 'newElementsClass' are clicked
});

You can, of course, bind delegated events to any element that's an ancestor of the newly-added elements, such as the body or to the document itself; but binding to the closest common parent prevents the events bubbling all the way through the DOM, which avoids needless performance penalties.

References:

• delegate().
• on().