ajax调用后jQuery click事件再次执行函数

Question

$(document).on('click', '#slider_icons_wrapper.play', function(event) {
        var slider_icons_wrapper = $('#slider_icons_wrapper');

        slider_icons_wrapper.attr('class', 'pause');
        autoSlider(cur_img_div_pos);
        showButton('play_icon');
        console.log('play');
    });

    $(document).on('click', '#slider_icons_wrapper.pause', function(event) {
        var slider_icons_wrapper = $('#slider_icons_wrapper');

        slider_icons_wrapper.attr('class', 'play');
        clearInterval(inter);
        showButton('pause_icon');
        console.log('pause');
    });

此代码在第一次加载文档时运行良好。 当用户通过ajax调用导航到另一个页面（文档不刷新），并返回到包含#slider_icons_wrapper div的页面时，当用户单击该div时，该函数会执行两次。如果用户再次导航并返回，则函数执行 3 次，以此类推！

我做错了什么？

编辑#1

当用户导航到另一个页面时，元素 #slider_icons_wrapper 将从 DOM 中删除。当它通过 ajax 调用注入回来时，click 事件每次都会触发更多时间。当用户离开此页面时，我试图解除点击事件的绑定，但同样的事情发生了

Answer 1

似乎每个页面返回都将事件侦听器添加到文档中。尝试将它们添加到 document.ready --

function init(e){

    $(document).on('click', '#slider_icons_wrapper.play', function(event) {
        var slider_icons_wrapper = $('#slider_icons_wrapper');

        slider_icons_wrapper.attr('class', 'pause');
        autoSlider(cur_img_div_pos);
        showButton('play_icon');
        console.log('play');
    });

    $(document).on('click', '#slider_icons_wrapper.pause', function(event) {
        var slider_icons_wrapper = $('#slider_icons_wrapper');

        slider_icons_wrapper.attr('class', 'play');
        clearInterval(inter);
        showButton('pause_icon');
        console.log('pause');
    });

}

$(document).ready(init);

user1026361 还提出了在再次添加监听器之前删除监听器的好方法。但是，我相信在没有选择器的情况下使用 .off() 将删除通过 .on() 添加到该元素的所有侦听器。如果您采用 .off( ).on( ) 方法，我建议使用命名空间：

$(document).off('click.clickPlay').on('click.clickPlay', '#slider_icons_wrapper.play', function(event) {
    ...
});

$(document).off('click.clickPause').on('click.clickPause', '#slider_icons_wrapper.pause', function(event) {
    ...
});

Answer 2

如果您正在执行代码，其中事件处理程序设置为“导航并返回”，则您可能将多个处理程序分配给同一事件。

尝试使用这些语句：

$(document).off().on('click', '#slider_icons_wrapper.play', function(event) {

$(document).off().on('click', '#slider_icons_wrapper.pause', function(event) {

在重新分配之前清除您的处理程序

您应该始终清除您的处理程序，并注意您分配它们的位置在每次页面视图中只能看到一次。