$(document).ready listeners not running on dynamic content

Question

I have a $(document).ready function that sets up listeners for certain elements. However, all of the #leave-ride elements are added dynamically.

Listeners:

$(document).ready(function() {
    $("#post-ride").click(function() {
        addRide(currentDriver, $(destinationInput).val(), $(originInput).val(), $(dateInput).val(), $(timeInput).val());
        $.getScript("scripts/myRides.js", function() {});
    });

    $("#request-ride").click(function() {
        requestRide(currentDriver, $(destinationInput).val(), $(originInput).val(), $(dateInput).val(), $(timeInput).val());
        $.getScript("scripts/myRides.js", function() {});
    });

    $("#leave-ride").click(function() {
        console.log("leave Ride");
        leaveRide(currentDriver, $("leave-ride").closest("div").attr("id"));
        $.getScript("scripts/myRides.js", function() {});
    });
});

What do I need to do to get that listener to listen to dynamic content?

possible duplicate of [Javascript event loading w/dynamic content](http://stackoverflow.com/questions/9163637/javascript-event-loading-w-dynamic-content) — Bergi, Dec 03 '12 at 22:41
An id should only be used once in your document, and `$('leave-ride')` is most likely going to be empty. — Ja͢ck, Dec 03 '12 at 22:47

score 10 · Answer 1 · edited May 23 '17 at 12:24

10

Yes, ready runs only once. You can use event delegation:

Take the element closest to the #leave-ride which is not loaded dynamically (document in extreme cases). Then attach the handler on it, and use #leave-ride as the selector for the delegated event.

Assuming a div having the id #container is that static element:

$('div#container').on('click', '#leave-ride', function(){…});

See also Event binding on dynamically created elements?

edited May 23 '17 at 12:24

Community

1
1

answered Dec 03 '12 at 22:39

Bergi

630,263
148
957
1,375

+1 using a container will be more efficient than applying on() to the whole document. – Christophe Dec 03 '12 at 23:06

score 3 · Answer 2 · answered Dec 03 '12 at 22:33

3

Use on, change your event declaration

$("#post-ride").click(function() {

to

$("body").on('click',"#post-ride",(function() {

answered Dec 03 '12 at 22:33

Travis J

81,153
41
202
273

$(document) without quotes – A. Wolff Dec 03 '12 at 22:34
@roasted - yup :) usually I use "body" there so that is where the quotes came from, I will change it to body. – Travis J Dec 03 '12 at 22:35

score 0 · Answer 3 · edited Dec 03 '12 at 22:38

0

Use .on()

Example:

$("#leave-ride").on('click', function() {
   console.log("leave Ride");
   leaveRide(currentDriver, $("leave-ride").closest("div").attr("id"));
   $.getScript("scripts/myRides.js", function() {
    });
});

edited Dec 03 '12 at 22:38

Sparky

98,165
25
199
285

answered Dec 03 '12 at 22:33

romo

1,990
11
10

That won't make any difference. You need to pass a selector. – SLaks Dec 03 '12 at 22:33
You are not using delegation here – A. Wolff Dec 03 '12 at 22:34
`on` has some differences to `live`, one of them is that you need to delegate the event out. – Travis J Dec 03 '12 at 22:34

$(document).ready listeners not running on dynamic content

3 Answers3