How to bind events to HTML injected from AJAX requests

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.

similiar http://stackoverflow.com/questions/11976236/ajax-including-a-page — Musa, Sep 01 '12 at 04:36
possible duplicate of [How to bind a function to Element loaded via Ajax](http://stackoverflow.com/questions/10116170/how-to-bind-a-function-to-element-loaded-via-ajax) — Ciro Santilli OurBigBook.com, Aug 26 '14 at 13:19

score 7 · Accepted Answer · answered Sep 01 '12 at 04:33

7

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.

answered Sep 01 '12 at 04:33

Danil Speransky

29,891
5
68
79

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

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?

edited May 23 '17 at 11:50

Community

1
1

answered Sep 01 '12 at 04:33

rahul

7,573
7
39
53

But then I have to manage the events, because everytime the AJAX request is fired, it is going to bind another event. I.E. the AJAX request gets called every 10 seconds. – Justin Sep 01 '12 at 04:34

score 0 · Answer 3 · answered Sep 01 '12 at 04:35

0

Use the on method to make it live.

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

answered Sep 01 '12 at 04:35

Shankar Cabus

9,302
7
33
43

score -1 · Answer 4 · answered Sep 01 '12 at 04:32

-1

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

answered Sep 01 '12 at 04:32

Lucas Green

3,951
22
27

How to bind events to HTML injected from AJAX requests

4 Answers4