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をクリックすると関数が2回実行されます。ユーザーが再度ナビゲートして戻ると、関数は3回実行されます。

私は何が間違っているのですか？

編集＃1

ユーザーが別のページに移動すると、要素#slider_icons_wrapperがDOMから削除されます。ajax呼び出しを介して注入されると、クリックイベントは毎回より多くの時間で発生します。ユーザーがこのページを離れたときにクリックイベントのバインドを解除しようとしましたが、同じことが起こります

4

2 に答える 2

0

イベントハンドラーが「ナビゲートして戻る」に設定されているコードを実行している場合は、同じイベントに複数のハンドラーを割り当てている可能性があります。

次のステートメントを使用してみてください。

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

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

再割り当てする前にハンドラーをクリアします

常にハンドラーをクリアし、ハンドラーを割り当てる場所がページビューごとに1回だけ表示されるように注意する必要があります。

于 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 に答える