0

私はjQuery 1.7.2を使用しています。私がやろうとしているのは、( class を使用して) onmouseover1 つの div を起動することですが、このクラスを に変更し、2 番目の div のクラスを から に変更します。この後、onmouseover が 2 番目の div で起動されることを期待しています (私も使用しているので、ライブにする必要があります) が、そうはなりません。これが私のコードです：activeonmouseoutinactiveinactiveactive.on()

HTML

<div class="myDiv active first"></div> <div class="myDiv inactive second"></div>

JavaScript

$(document).ready(function () {
   $(".active").on("mouseover", function () {
      $("#output").text("mouseover fired!");
   });

   $(".active").on("mouseout", function () {
      $("#output").text("");
      $(".first").addClass("inactive").removeClass("active");
      $(".second").addClass("active").removeClass("inactive");
   });
});

そして、ここにjsFiddleがあります。クラスが正しく切り替えられていることを開発者ツールで確認できますが、イベントはまだ最初のクラスで発生しています。

4

2 に答える 2

2

私も使用し.on()ているので、ライブである必要があります

いいえ、子孫セレクター引数が渡された場合に.on()のみ、イベントの委任効果があります。

$(document).on("mouseover", ".active", function () {

の代わりにdocument、最も近い静的.activeコンテナー要素を使用してパフォーマンスを向上させることができます。

$('.active')子孫セレクター引数がない場合、jQuery は、実行時にjQuery オブジェクト内で一致した要素にのみイベント ハンドラーを直接アタッチします。これは、短縮形.mouseover(fn)や古い.bind('mouseover', fn)メソッドとまったく同じです。

于 2013-06-07T06:46:08.887 に答える