$(document).ready侦听器未在动态内容上运行

Question

我有一个$(document).ready为某些元素设置监听器的函数.但是,所有#leave-ride元素都是动态添加的.

听众:

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

我需要做些什么才能让听众听取动态内容？

Answer 1

是的,ready只运行一次.您可以使用事件委派:

取最接近#leave-ride未动态加载的元素(document在极端情况下).然后在其上附加处理程序,并#leave-ride用作委派事件的选择器.

假设一个具有id的div #container是那个静态元素:

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

另请参见动态创建元素的事件绑定？