javascript - jQuery の mouseenter を新しい新しい要素に適用する

Question

$('.class1').mouseenter(function() {

   $('<div class="class1"> </div>').appendTo('body');

});

上記は、私がやろうとしていることを示す疑似的なコードです。class1 の要素にマウスを合わせると、class1 の別の要素が作成されます。

私の問題は、このmouseenterバインダーが、作成された新しい class1 要素に対してトリガーされないことです。mouseenterこのトリガーを新しく作成された要素にも適用するにはどうすればよいですか?

ありがとう

score 4 · Accepted Answer

jQuery 1.7 では、イベントを「on」でバインドできるため、指定されたセレクターに一致する含まれる要素にイベントが委任されます。

したがって、あなたの場合、イベントを本文にバインドし、class1次のようにセレクターを指定します。

$('body').on('mouseenter' ,'.class1', function(e) {
    $('<div class="class1"></div>').appendTo('body');
});

詳細については、こちらのドキュメントを参照してください: http://api.jquery.com/on/

バージョン < 1.7 でこれを実現するために使用する関数は「live()」です。バージョン 1.7 では廃止され、アップグレードされた「on()」メソッドが採用されました。詳細については、こちらの古いドキュメントを参照してください: http://api.jquery.com/live/

score 2 · Accepted Answer

The better solution would be to use .on() on the parent element or even the body instead.

$('body').on('mouseenter', '.class1', function(){
     $(this).append('<div class="class1"> </div>');
});

This works more similarly to the old live() event, as the parent will look for the event on any new elements added to body as well.

EDIT: don't forget to use $(this) inside of that function instead of forcing jQuery to do a second DOM lookup :) sorry I noobed out on that one

score 0 · Accepted Answer

$('body').mouseenter(addDiv);

function addDiv() {
    $('<div class="class1"> </div>').appendTo('body');
}

新しく追加された div は、使用時に関数をトリガーしません$('#container').on('mouseenter', '.class1', addDiv);

フィドルとコードを修正しました。

score 0 · Accepted Answer

delegateまたはメソッドの使用を試すことができonます (使用する jquery のバージョンによって異なります)。

基本的に、親要素にデリゲートをアタッチし、子要素のアクションをリッスンします。

$('body').on('mouseenter', '.class1', function() {});

これにより、要素にのみイベントハンドラーが登録されbodyます。

4 に答える 4