javascript - $(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 只运行一次。您可以使用事件委托(delegate):

取最接近 #leave-ride 的元素，它不是动态加载的(在极端情况下是 document)。然后在其上附加处理程序，并使用 #leave-ride 作为 delegated event 的选择器.

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

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

另见 Event binding on dynamically created elements?