$(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?

Answer 1

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?