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事件每次都会触发更多时间。我试图在用户离开此页面时取消绑定click事件，但同样的事情发生了

Answer 1

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

尝试使用以下语句：

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

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

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

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

Answer 2

似乎每次返回页面时都会将事件侦听器添加到文档中。尝试在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) {
    ...
});

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

2 个答案: