2

私は通常、次のような要素への複数のバインドを防止しています。

$(document)
    .find('.ui-input-search input')
    .filter(function() { return $(this).jqmData('bound') !== true; })
    .jqmData('bound', true)
    .on('change keyup', function (e) {
        //do sth
    });

これは、要素がページ上にあり、「すぐに使用できる」場合にうまく機能します。

問題は、ページに動的に追加される要素についても同じことをしたいということです。これらの要素では、JQMが要素の拡張を行わない場合があるため、作成中の要素へのバインドが機能しない場合があります。

質問：
ページ非表示でバインドを解除したくない場合、バインドが設定されたら要素もロックするように上記のコードを変更するにはどうすればよいですか？

だから私はこのようなことをしたい：

$(document).on('change keyup','.ui-input-search input', function (e) {
  // bind to the selector only once
});

しかし、IEのために:notセレクターを使用できないので、興味があります。.ui-input-search input:not(.bound)

フィードバックをありがとう！

4

3 に答える 3

1

いくつかの方法があります。それらは私の他のARTICLEで見つけることができます。または、ここで見つけることができます。次の章を検索してくださいPrevent multiple event triggering。

複数のイベントのトリガーを防ぐ

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

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

または、ここでテストできます: http://jsfiddle.net/Gajotres/yWTG2/

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

解決策 1:

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

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

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

$('#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', '#page', function(event){  
    if(event.handled !== true) // This will prevent event triggering more then once
    {
        // Some code
        event.handled = true;
    }
    return false;                
});

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

pageChange イベントの癖 - 2 回トリガーする

前述の問題とは関係なく、pagechange イベントが 2 回トリガーされることがあります。

pagebeforechange イベントが 2 回発生する理由は、toPage が jQuery 拡張 DOM オブジェクトでない場合に、changePage で再帰呼び出しが行われるためです。開発者はイベント内で toPage を変更できるため、この再帰は危険です。開発者が一貫して toPage を文字列に設定すると、pagebeforechange イベント ハンドラー内で、オブジェクトであるかどうかに関係なく、無限再帰ループが発生します。pageload イベントは、新しいページをデータ オブジェクトの page プロパティとして渡します (これはドキュメントに追加する必要がありますが、現在はリストされていません)。したがって、pageload イベントを使用して、読み込まれたページにアクセスできます。

簡単に言えば、これは、pageChange を介して追加のパラメーターを送信しているために発生しています。

例：

<a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#care-plan-view?id=9e273f31-2672-47fd-9baa-6c35f093a800&amp;name=Sat"><h3>Sat</h3></a>

結論

3番の解決策が最善の策です。バインドとバインド解除は、プロセスが要求される場合があります。

于 2013-03-14T17:18:19.117 に答える
1

しかし、IEのせいで :not セレクター .ui-input-search input:not(.bound) を使用できないので、興味があります:

ブラウザのサポートページを引用：

ブラウザーの CSS セレクターのサポートに関係なく、api.jquery.com/category/ selectors/ にリストされているすべてのセレクターは、jQuery 関数の引数として渡されると、正しい要素セットを返します。

:notブラウザーの CSS エンジンがセレクターをサポートしているかどうかに関係なく、jQuery でコレクションを形成するときにセレクターを使用できます。

于 2013-03-14T16:52:39.827 に答える
0

私は通常、名前空間を使用します。

$('.selector').unbind('change.namespace').bind('change.namespace', function () {

名前空間を使用してバインドしたため、他のハンドラーを削除することを心配することなく、その名前空間を持つすべての要素からそれを削除できます。

于 2013-03-14T16:52:37.080 に答える