1

jQuery の hover() を使用して、マウス オーバーした TR の背景色を変更しようとしています。また、click() を使用して TR をテーブル間で移動します。しかし、TR を別のテーブルに移動すると、hover() と click() が機能しません。

誰かが理由を教えてもらえますか? どうすればこれを修正できますか？ここに私のコードがあります: http://jsfiddle.net/MJNGL/

$(document).ready(function() {
    $("table tr").hover(
        function() {
            $(this).css('background', 'yellow');
        },
        function () {
            $(this).css('background', '');
        }
    )

    $("table tr").click(function () {
        var id = $(this).children().attr("id");
        $(".cityItem1").each(function m(x,e) {
            if ($(e).children().attr("id") == id) {
                $(e).remove();
                $("#tblCity2").append('<tr class="tableRow"><td width="750" id="' + $(e).children().attr('id') + '">' + $(e).children().html() + '</td></tr>');
            }
        });
    });
});
​
4

2 に答える 2

5

以下のようにホバー機能を変更してみてください。

デモ

$("table").on('mouseenter', 'tr', function() {
        $(this).css('background', 'yellow');
}).on('mouseleave', 'tr', function () {
        $(this).css('background', '');
});

コードが機能しなかったのはなぜですか?

イベント ハンドラーは、DOM で使用できる要素にバインドされます。あなたの場合、 onPageLoad -現在 DOM にある$('table tr')2 つの一致する s を返すため、 andイベントはこれら 2 つの s にのみバインドされます。trhoverclicktr

後でテーブルから行を削除clickしtr、テーブル 2 に追加します。この時点で、ハンドラーを新しく追加された行に再度バインドする必要があります。しかし、行を追加するたびにハンドラーをバインドするのは骨の折れるプロセスです。

そのため、イベント委任と呼ばれる別の興味深いアプローチがあります。

直接および委任されたイベント

ブラウザー イベントの大部分は、ドキュメント内の最も深い、最も内側の要素 (イベント ターゲット) から発生し、本文とドキュメント要素に至るまでバブル (伝播) します。

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する場合のドキュメントなどです。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

~ jQuery ドキュメントhttp://api.jquery.com/on/から

于 2012-05-10T18:12:40.267 に答える
0

@Vegaが指摘したon()ように、1.7以降のバージョンのjQueryに使用してください。以前のバージョンを使用している場合は、delegate().

これは、jQuery < 1.7 のコードです。

$(document).ready(function() {
    $("table").delegate('tr', 'hover',
        function() {
            $(this).css('background', 'yellow');
        });

    $("table").delegate('tr', 'mouseout',
        function() {
            $(this).css('background', '');
        }
    );

    $("table tr").click(function () {
        var id = $(this).children().attr("id");
        $(".cityItem1").each(function m(x,e) {
            if ($(e).children().attr("id") == id) {
                $(e).remove();
                $("#tblCity2").append('<tr class="tableRow"><td width="750" id="' + $(e).children().attr('id') + '">' + $(e).children().html() + '</td></tr>');
            }
        });
    });
});

デモ

jQuery >= 1.7 の場合、Vega のコードを使用します。

于 2012-05-10T18:21:21.450 に答える