Question

So I am injecting html via an AJAX request:

Ajax Response

  <div id="my-element">HTML from AJAX request</div>

The problem is that the element with id #my-element comes in from the AJAX request, but I need to bind events too it. For example:

 $(document).ready(function() {
    $("#my-element").click(function() {
        alert("hit");
    });
 });

Obviously the event above never fires, because when the page is ready, the HTML has not been injected from the AJAX request yet. What is the best solution to fix this?

Thanks.

Answer 1

Try to use jQuery.on function: http://api.jquery.com/on/

$(document).on('click', '#my-element', function () { ... });

Then it will work even with dinamically added elements.