0

同じクラス「orig」を持つ2つのdiv[id1、id2]と、「orig2」を持つ1つのdiv[id3]があります。.origにマウスオーバーすると、すべてのdiv [id1、id2]がピンク色になり、.orig2にマウスオーバーすると、div[id3]が緑色になります。

<div id="id1" class="orig">Some Text</div>
<div id="id2" class="orig">Second Div of name 1</div>
<div id="id3" class="orig2">Third div</div>
<input type="button" id="btn1" value="CLICK ME" />

ロールオーバー時のJquery

 $('.orig').on('mouseenter',function () {
  $('.orig').css('background-color', '#e31b3f');
 });

$('.orig').on('mouseleave',function () {
 $('.orig').css('background-color', '#7d7d7d');
});

$('.orig2').on ('mouseenter', function () {
 $('.orig2').css('background-color', '#80bd3c');
});
$('.orig2').on('mouseleave',function () {
 $('.orig2').css('background-color', '#464646');
});

ボタンをクリックすると、div id3からorig2クラスが削除され、origクラスが追加されます。したがって、理想的には、id3 divをスクロールすると、id1およびid2とともにピンク色になるはずです。しかし、これは起こっていません。id1またはid2をスクロールすると、id3がピンク色になり、.origクラスが正常に追加されたことを示します。ただし、id3をスクロールしても何も起こりません。

$('#btn1').on('click', function () {
 $('#name2').addClass('orig');
 $('#id3').removeClass('orig2');
});

これはjsFiddleリンクです：http：//jsfiddle.net/monologish/Eprym/

これは私の問題の単純化されたバージョンです。ホルダーdiv内に完全に新しいdivを追加しようとしましたが、何も変更されていません。なぜこれが起こっているのか分かりません。

4

1 に答える 1

2

イベント ハンドラーは、ハンドラーのバインド時にセレクターに一致する要素にアタッチされるため、要素クラスを変更しても、古いイベント ハンドラーが削除されたり、以前に新しいクラスにアタッチされていたイベント ハンドラーが機能し始めたりすることはありません。そのためには、セレクターに一致する新しい要素にイベント ハンドラーを再度アタッチするか、親要素にアタッチされた委任されたイベント ハンドラーを使用して、実行中にセレクターをチェックする必要があります。

$(document).on({
    mouseenter: function () {
        $('.orig').css('background-color', '#e31b3f');
    },
    mouseleave: function () {
        $('.orig').css('background-color', '#7d7d7d');
    }
}, '.orig');

フィドル

于 2013-03-02T17:06:28.583 に答える