1

コードに jQuery から dynamic を追加しましたが、1 ページ戻って が追加されたページに戻ってそれらを押すと、どういうわけか 2 回クリックするようになりました。

私は alert('something'); で試しました。クリックすると：

$(document).on('click', '#products a', function() {
  alert('something');
}

また、ページに戻ると 2 回表示されます。私が試してみました

$('#products a').remove();

「戻る」ボタンをクリックすると、すべての要素が 2 回追加されたと思ったのですが、違いはありませんでした。

これらの行の周りには何もありません。おそらく $(document).ready(); が必要です。またはpageinitで何か？

4

1 に答える 1

3

これは、複数のイベント トリガーの問題としても知られており、jQuery Mobile のアーキテクチャーから一般的です。

この問題にはいくつかの解決策があります。

解決策 1

最善の解決策はpageinit、イベントをバインドするために使用することです。公式ドキュメントを見ると、pageinitドキュメントの準備ができたのと同じように、一度だけトリガーされることがわかります。そのため、イベントが再度バインドされることはありません。off メソッドでイベントを削除する場合のような処理オーバーヘッドがないため、これが最適なソリューションです。

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

この実用的なソリューションは、以前の問題のある例に基づいて作成されています。

解決策 2

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

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

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

解決策 3

次のように、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 よりもはるかに優れています。

解決策 4

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

$(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/

実際の例はここにあります。

もう 1 つ、jQuery Mobile で準備されたドキュメントを使用しないでください。代わりに、適切なページ イベントを使用してください。最善の解決策は、一度だけトリガーする pageinit を使用することです。詳細については、こちらを参照してください。

于 2013-10-30T15:50:34.733 に答える