jQuery: Handle Events on Objects Loaded via AJAX

jQuery event handlers attached directly to objects on page load do not work on DOM elements loaded via AJAX. To handle events on these objects, attach event handlers to the root document.

copy

//doesn't work with ajax elements
$("div.buttons .my-button").click(function ()
{
    console.log("button clicked");
});


//does work
$(document).on("click", 'div.buttons .my-button', function (event)
{
    console.log("button clicked");
})