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只运行一次。您可以使用事件委托：

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

假设具有 id 的 div#container是该静态元素：

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

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

Answer 2

使用on，更改您的事件声明

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

至

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

Answer 3

利用.on()

例子：

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