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作为delegated event的选择器。

假设id为#container的div是静态元素：

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

另见Event binding on dynamically created elements?

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

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

3 个答案: