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

4

2 回答 2

0

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

尝试使用这些语句：

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

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

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

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

于 2012-10-29T19:24:20.873 回答
0

似乎每个页面返回的事件侦听器都被添加到文档中。尝试将它们添加到 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) {
    ...
});
于 2012-10-29T19:48:24.690 回答