0

リストを動的に入力し、その後クリックすると、イベントが複数回呼び出されます。1回目は1回、2回目は2回、3回目は3回…

4

1 に答える 1

2

まず、この問題の詳細については、私の別の回答: jQuery Mobile: document ready vs page events を参照してください。

複数のイベント バインド/トリガーを防止する

興味深い jQM ロード アーキテクチャのため、複数のイベント トリガーは常に問題になっています。たとえば、次のコード スニペットを見てください。

$(document).on('pagebeforeshow','#index' ,function(e,data){    
    $(document).on('click', '#test-button',function(e) {
        alert('Button click');
    });    
});

動作する jsFiddle の例: http://jsfiddle.net/Gajotres/CCfL4/

ページにアクセスするたびに#indexクリック イベントがボタン#test-buttonにバインドされます。この問題を防ぐ方法はいくつかあります。

解決策 1:

バインドする前にイベントを削除します。

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').die().live('click', function(e) {
        alert('Button click');
    });    
});

動作中の jsFiddle の例: http://jsfiddle.net/Gajotres/K8YmG/

オブジェクトに異なるイベントがバインドされている場合:

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').die('click').live('click', function(e) {
        alert('Button click');
    });    
});

解決策 2:

次のように、jQuery フィルター セレクターを使用します。

$('#carousel div:Event(!click)').each(function(){
    //If click is not bind to #carousel div do something
});

イベント フィルターは公式の jQuery フレームワークの一部ではないため、http: //www.codenothing.com/archives/2009/event-filter/で見つけることができます 。

一言で言えば、速度が主な関心事である場合、ソリューション 2はソリューション 1 よりもはるかに優れています。

解決策 3:

新しいもの、おそらくそれらすべての中で最も簡単です。

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#test-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more then once
        {
            alert('Clicked');
            e.handled = true;
        }
    }); 
});

動作中の jsFiddle の例: http://jsfiddle.net/Gajotres/Yev9/

このソリューションの sholsinger へのTnx : http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

より詳しい情報

この問題について詳しく知りたい場合は、この記事をご覧ください。実際の例が含まれています。

于 2013-05-21T14:56:05.263 に答える