How to Bind jQuery Click Event on Ajax Loaded Content

If you use jQuery click like events in the Ajax loaded content, it will not work in a normal scenario. The jQuery events (click, change, blur, hover, submit, etc) need to be bind properly in the dynamic content loaded by the Ajax request. You need to use the event delegation for Ajax generated content using jQuery.

Use jQuery delegation to attach an event in the dynamically created content by Ajax. The following code snippet shows you how to add/bind/use the jQuery click event on Ajax generated elements.

$(document).on("click", ".button", function(){
    alert("The button is clicked in Ajax content!!");
});