How to bind events to HTML injected from AJAX requ

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

Do the binding in the success callback of your ajax call, after you ahve inserted the html into the DOM.

Answer 2

Use the on method to make it live.

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

Answer 3

Add your event after injecting html via an AJAX request has been completed
or
you can use on method

see this example also

Event binding on dynamically created elements?

Answer 4

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.