-1

実験として次のコードをまとめました。

HTML:

<button>Click Me</button>

jQuery:

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

    $newButton = $('<button />');
    $newButton.addClass('newButton');
    $newButton.attr('href', '#');
    $newButton.html('A New Button');

    $('body').append($newButton);


});

コード自体は正常に動作し、ボタンがクリックされると予想どおり、jQuery は新しいボタンを生成します。頭を悩ませた問題は、新しく作成されたボタンがクリックされても反応しないことです。つまり、jQuery コードがすべての要素をターゲットにしているにもかかわらず、新しいボタンが作成されません。

live() は 1.7 以降サポートされなくなり、on() に置き換えられたことを理解しています。ご覧のとおり、上記のコードは on() イベントを使用していますが、 live() が提供するために使用する結果が得られません。

明らかに私はどこかで間違っているのですが、誰かアドバイスできますか?

ありがとう。

4

2 に答える 2

4

使用するときは.on()、イベント ハンドラーを DOM ツリーの上位に委任する必要があります。

$("#someCommonAncestor").on("click", "button", function () {
    // Do stuff
});

これは、まさに.live()舞台裏で行われていることです (イベント ハンドラーを にデリゲートしますdocument)。documentツリーのできるだけ上にあるので、これはあまり効率的ではありません。イベント ハンドラーをデリゲートできるターゲット要素に近いほど、より効果的です。

これが機能するのは、ほとんどの DOM イベントが発生元の要素 ( target ) からすべての祖先要素を通じてツリーをバブルアップするためです。イベント ハンドラーをバインドした要素にイベントが到達すると、jQuery は、ターゲットがセレクター ( の 2 番目の引数.on()) と一致するかどうかを確認し、一致する場合はハンドラーを実行します。

于 2012-11-29T15:52:59.080 に答える
1

.on委任されたイベントとして機能するには、特定の構文で を使用する必要があります。下記参照、

$(container).on('click', 'child-el-selector', function() {
      //your stuff
});

ただし、委任されたイベントを使用する代わりに、要素を作成するときにハンドラーをバインドすることをお勧めします (直接バインド)。以下のように、

function myButtonFx () {
    var $newButton = $('<button />');
    $newButton
        .addClass('newButton')
        .attr({'href': '#'})
        .html('A New Button')
        .on('click', myButtonFx);

    $('body').append($newButton);
}

$('button').on('click', myButtonFx); 
//Note: The above binds only to the button that existed in DOM.
于 2012-11-29T15:53:32.543 に答える