CODEWITHSUNDEEP
javascriptjqueryactionlistener
gfreestone
gfreestone

Reputation: 153

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

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?

Upvotes: 2

Views: 5687

Answers (3)

Bergi
Bergi

Reputation: 665448

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?

Upvotes: 10

romo
romo

Reputation: 1990

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() {
    });
});

Upvotes: 0

Travis J
Travis J

Reputation: 82337

Use on, change your event declaration

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

to

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

Upvotes: 3

Related Questions