Michael Shum Michael Shum - 2 months ago 6
Ajax Question

How do I check mouse handlers in jQuery after loading content through AJAX?

I have a file 'controlpanel.php' that uses jQuery and communicates to another php file through AJAX Get requests. That ajax request will result in a table with some buttons being displayed in controlpanel.php

$(document).ready() is only called once, and it is called before the table is loaded (from the AJAX request).

How can I use jQuery to watch mouse handlers for the newly loaded table (aka after $(document).ready() has been called?

Specifically, I am trying to do something like:

$('[id^=modify-btn]').click(
function () {
alert("modify-btn !!");
//and other fun stuff
}
);


AFTER the AJAX request goes through, but I am unsure as to how to enable this trigger.

Thank you for your time!

Answer

You can use on() for event binding on dynamically created elements (loaded content through AJAX).

$(document).on( eventName, selector, function(){} );

So you can implement it like this:

$(document).on('click', '[id^=modify-btn]',
    function () { 
        alert("modify-btn !!");
        //and other fun stuff
    }
);
Comments