Question

我有一个使用JavaScript插件创建的滑块按钮，它会自动生成一个类名为.flex-next的元素。但是，当我运行以下代码时，我的控制台中没有记录任何内容：

$(window).load(function() {
    $( ".flex-next" ).on( "click", function() {
        console.log("youclick");
    })
});

Answer 1

由于在加载dom后动态添加按钮，因此您需要使用event delegation，因此可以在此按钮上使用click事件：

$(document).on('click','.flex-nex',function() {
    console.log("youclick");
})

Answer 2

使用$(window).load(...);加载窗口时，您可以设置您的来电。在$(document).ready(...)上启动flexsider，它在窗口加载并且所有内容都加载到DOM之后发生。因此，当您的脚本触发时，它会查找尚未存在的元素。

通过在$（document）.ready（）上触发脚本来解决这个问题，然后使用event delegation。最佳实践方式是声明您的函数：

$(document).ready(
    $(document).on('click', ".flex-next", function() {
        console.log("youclick");
    });
});

通过这种方式，您的点击侦听器将等到页面准备就绪，并将点击事件发送到任何.flex-next事件，即使是动态创建的事件。这样，如果您使用异步加载的大型图像代码仍然有效。

Answer 3

你可能在执行滑块按钮之前调用你的$（“。flex-next”）。所以，基本上，当你调用.on

时，你的.flex-next类在DOM中不存在

初始化插件后，您应该调用.on调用。