1

たとえば、Javascript / jQueryのものを含むページがあります。

(function()
{
    $('.tip').tooltip();

    $('.test').click(function()
    {
        alert('Clicked!')
    });
}();

ページに jQuery を使用して HTML を挿入し、DOM を変更します。たとえば、「tip」または「test」クラスの追加要素を挿入します。jQueryは操作されていないDOMで動作しており、挿入されたばかりの要素が存在しないため、新しく挿入された要素は機能しません。だから私は周りを検索して、「クリック」のためにこの解決策にたどり着きました：

$('body').on('click','.click',function()
{
    alert('Clicked!')
});

理由はわかりませんが、このように操作された DOM で動作し、jQuery は新しく挿入された要素で動作します。私の最初の質問は、なぜこれが機能し、click() 関数だけが機能しないのですか? 2 番目の質問は、なぜ「体」を指さなければならないのかということです。

最後に、私の 3 番目の質問は、ツールチップを使用してこれを行うにはどうすればよいかということです。

この件については非常に多くの情報があることは知っていますが (前に読んだ delegate() および live() 関数)、それについての説明が見つかりません。そして、見つけた情報では 3 番目の質問を解決できません。

あなたの反応を楽しみにしています！

追加の質問:

4) この種の状況では、常に「本体」を指すことをお勧めしますか? 常にそこにありますが、パフォーマンスの問題が発生する可能性がありますか?

4

3 に答える 3

3

私の最初の質問は、なぜこれが機能し、click() 関数だけが機能しないのですか?

イベント ハンドラーは親要素に委譲されるようになったため、子要素を置換または操作した後でも残ります。

あなたの熟読のためのイベント委任に関する古い記事 - しかし、概念は同じままです:

そして 2 番目の質問は、なぜ「体」を指さなければならないのかということです。

適切な親要素なら何でも構いません。たとえば、置き換えられない直接の親 (たとえば、div ラッパー)。

最後に、私の 3 番目の質問は、ツールチップを使用してこれを行うにはどうすればよいかということです。

新しく挿入された要素でツールチップ プラグインを再初期化する必要があります。例えば：

$.get("foo.html", function (html) {
    $("#someDiv").html(html);
    $("#someDiv").find(".tip").tooltip();
});
于 2013-03-26T19:16:29.737 に答える
2

JQuery は DOMのclick()変更を監視していないため、DOM を操作してもイベントは機能しません。イベントをバインドするとclick()、その時点でページにある要素が選択されます。イベントを明示的にバインドしない限り、新しいものはリストにありません。

あなたがclick()体にイベントを指摘したからです。次に、JQuery は、クリックのターゲットが、クリックされた要素と一致するイベント ハンドラー (作成したものなど) のいずれかと一致するかどうかを確認します。このようにして、すべての新しい要素は、それらに「関連付けられた」イベントを取得します。

ツールチップは本文に配置できるイベントではないため、要素の作成時に再初期化する必要があります。

編集：

4 番目の質問については、場合によって異なります。本体にバインドする利点は、イベントを誤って要素に複数回バインドしないことです。欠点は、各イベントでチェックする必要があるイベント ハンドラーを追加することであり、これによりパフォーマンスの問題が発生する可能性があります。

DRY に関する懸念については、ツールチップの初期化を関数に入れ、追加時にそれを呼び出します。この点に関して、同じ関数呼び出しを回避しようとするのは少しやり過ぎです、IMO。

于 2013-03-26T19:18:04.697 に答える
1

イベントは、バインド先の特定のオブジェクトにバインドされます。

そのため、実際には css selector を満たすオブジェクトの単なるコレクションである$('.tip').tooltip()tooltip() 機能を実行するようなものがあります。注意すべきことは、コレクションは動的ではなく、基本的に現在のページの「データベース」クエリであり、jQuery によってラップされた HTML DOM オブジェクトの結果セットを返すということです。$('.tip').tip

したがって、そのコレクションで tooptip() を呼び出すと、そのコレクション内のオブジェクトに対してのみツールチップ機能が実行され、ツールチップが呼び出されたときにそのコレクションに含まれていなかったオブジェクトにはツールチップ機能がありません。そのため、呼び出し後.tipにセレクターを満たす要素を追加しても、ツールチップ機能は提供されません。tooltip()

現在、$('body').on('click','.click', func)実際にはクリックイベントをタグにバインドしていますbody（常に存在する必要があります：P）が、クリックイベントがターゲットCSSセレクター（この場合）の要素を通過したかどうかをキャプチャする.clickため、チェックは動的に行われると、新しい要素がキャプチャされます。

これは、何が起こっているのかを比較的短くまとめたものです...お役に立てば幸いです

更新: ツールチップの最善の方法は、要素を追加した後にツールチップをバインドすることです。

$('#container').load('www.example.com/stuff', function() {
    $('.tip', $(this)).tooltip();
});
于 2013-03-26T19:23:24.960 に答える