3

私は次のコードを持っています：

var $reviewButton = $('span.review_button');

$reviewButton
    .live('click',
        function(){

            $('#add_reviews').show(); 

        }
    )

スクリプトの後半で、AJAX呼び出しを使用してコンテンツをロードすると、$（'span.review_button'）の別のインスタンスが画像に入ります。クリックイベントがAJAXで生成されたレビューボタンで機能していなかったため、上記のコードを「.live」を使用するように更新しました。

.live（click //）イベントは、静的な「span.review_button」とAJAXで生成された「span.review_button」の両方で機能するため、このコードは機能します。

ただし、.liveが廃止されているので、「。on」に切り替えてjqueryのドキュメントの指示に従おうとしましたが、以下のコードに切り替えると、「。live」に切り替える前と同じ問題が発生します。クリック関数は「span.review_button」の元のインスタンスでは機能しますが、AJAXで生成されたインスタンスでは機能しません。

var $reviewButton = $('span.review_button');

$reviewButton
    .on('click',
        function(){

            $('#add_reviews').show(); 

        }
    )

提案？

4

3 に答える 3

8

イベント委任の正しい構文は次のとおりです。

$("body").on("click", "span.review_button", function() {
    $("#add_reviews").show(); 
});

ここでは、代わりにの静的な親要素をbody使用できます。"span.review_button"

注意！コメントで説明されているように、on()委任されたイベントのアプローチでは、メソッドの2番目の引数として文字列値を使用する必要がありますが、jQueryオブジェクトは使用しないでください。

于 2012-12-04T21:30:32.787 に答える
6

これは、の委任バージョンを使用する必要があるためですon()。

$("#parentElement").on('click', '.child', function(){});

#parentElementイベントをバインドするときにDOMに存在している必要があります。

イベントはDOMツリーをバブルアップし、に達する#parentElementと、その起点がチェックされ、一致する場合.childは関数が実行されます。
したがって、これを念頭に置いて、最高のパフォーマンスを得るには、バインド時にDOMに存在する最も近い親要素にイベントをバインドするのが最善です。

于 2012-12-04T21:30:54.567 に答える
3

最初のセレクター (この場合は div.content) を、クリックされたボタンと AJAX を使用して入ってくる任意の DOM を含む親コンテナーとして設定します。何らかの理由でページ全体を変更する必要がある場合は、「body」に変更することもできますが、セレクターをできるだけ効率的にしたいので、変更しない最も近い親 DOM 要素に絞り込みます。変化する。

次に、クリック アクションを span.review_button に適用して、以下のコードに反映させます。

// $('div.content') is the content area to watch for changes
// 'click' is the action applied to any found elements
// 'span.review_button' the element to apply the selected action 'click' to. jQuery is expecting this to be a string.
$('div.content').on('click', 'span.review_button', function(){
    $('#add_reviews').show(); 
});
于 2012-12-04T21:36:10.083 に答える