0

現在、javascript が関係する奇妙なバグに直面しています。jquery ui タブを使用して、Web サイトのタブを動的に追加および削除しました。タブのコンテンツには、マウスオーバーすると消えて、下部の関連リンクのマウスリーブで表示される 2 つのボタンが含まれています。このマウスオーバーは、最初の既定のタブでは正常に機能しますが、動的に追加されたタブでは機能しません。新しいタブのコンテンツにマウスオーバーしても効果がありません。ここにフィドルがあります

http://jsfiddle.net/Hunain/E2nJa/ このフィドルは私の結果として正確ではなく、私の問題を含んでいないので、マウスオーバーのために次のコードを使用した問題を説明したので、上記のステートメントを正しく読んでください

$("#butt").mouseenter(function () {
            $("#butt").css("visibility","hidden");
          })
          $("#info").mouseleave(function () {
            $("#butt").css("visibility","visible");
          });
4

4 に答える 4

3

ドキュメントの読み込み時にイベントをバインドし、イベントのバインド後にボタンを追加しています。そのため、イベントは後で追加された要素とバインドされません。
ボタンを追加した後、イベントをバインドする必要があります。

于 2013-02-28T12:41:25.587 に答える
1

あなたのフィドルを参照して...

$("#butt").mouseenter(function () {
     $("#butt").css("visibility", "hidden");
 })

こんな感じになります

$jQuery.on("mouseenter","#butt",function () {
     $("#butt").css("visibility", "hidden");
 });

実行時に追加されることがわかっている他の要素についても同じことが言えます。

于 2013-02-28T12:41:42.130 に答える
1

on委任されたイベントを使用する...

$(document).on("mouseenter", "#butt", function () {
  $(this).css("visibility","hidden");
});

$(document).on("mouseleave", "#butt", function () {
  $(this).css("visibility","visible");
});

直接および委任されたイベントについて詳しく知りたい場合は、この投稿を読むことができますon

パフォーマンスを向上さdocumentせるためではなく、ドキュメント内に存在する最も近い静的要素に委任する方が適切です。body

于 2013-02-28T12:42:31.317 に答える
1

これは、ページの読み込み時に DOM に存在するアイテムに対してmouseenterのみmouseleave機能するためです。

委任されたイベントを使用する必要があります: onjQuery 1.7+ またはそれdelegate以前のバージョンの場合。

これを試してください ( on):

$("body").on("mouseenter", "#butt", function () {
    $(this).css("visibility","hidden");
});

$("body").on("mouseleave", "#butt", function () {
    $(this).css("visibility","visible");
});

または、1.7 より前の場合 ( delegate):

$("body").delegate("#butt", "mouseenter", function () {
    $(this).css("visibility","hidden");
});

$("body").delegate("#butt", "mouseleave", function () {
    $(this).css("visibility","visible");
});
于 2013-02-28T12:40:59.643 に答える