JQuery Interview Questions

52. The code below is for an application that requires defining a click handler for all buttons on the page, including those buttons that may be added later dynamically.
What is wrong with this code, and how can it be fixed to work properly even with buttons that are added later dynamically?

// define the click handler for all buttons
$( "button" ).bind( "click", function() {
 alert( "Button Clicked!" )
});
/* ... some time later ... */
// dynamically add another button to the page
$( "html" ).append( "<button>Click Alert !</button>" );

Ans:

The button that is added dynamically after the call to bind() will not have the click handler attached. This is because the bind()method only attaches handlers to elements that exist at the time the call to bind() is made.
This problem is solved with functions that use “event bubbling” to match events on both current and future elements. In the past, this was done by replacing bind() with live(). live() was deprecated in jQuery 1.7 though. delegate() works similarly to live() but also provides control over how far an event must bubble up the DOM.
However, the recommended method is to use on(), which can behave like bind(), live(), or delegate() depending on syntax. The following code attaches the handler to all current and future buttons:

// define the click handler for all buttons
$( document ).on( "click", "button", function() {
 alert( "Button Clicked!" )
});

/* … some time later … */

// dynamically add another button to the page
$( “html” ).append( “Click Alert!” );