1

<div>以下は両方のタグで委任されていますか? すなわち: 1 つまたは 2 つのイベント ハンドラー? data-idevent.delegateTarget でキャプチャする必要があります。<div>これは、各タグに取り付ける場合は簡単ですが、 20 個ほどある場合があります。どちらにしても大したことではないと思いますが、理解を深めたいと思います。

jQuery Docsselectorは、onメソッドに を提供すると委任されると述べていますが、私のシナリオは、複数の要素にアタッチしている場合とは少し異なるようです。ブラウザーのデバッガー ツールを使用して、結果のイベント ハンドラーを確認する方法はありますか?

ハンドラーを にアタッチする場合document、含まれている をキャプチャできる簡単な方法はありますdivか? 私のドキュメントは例よりもかなり複雑でありdiv、関連付けられた が要素data-idの直接の親であるという事実に単純に依存することはできません。input

$(".target").on("change", "input", function (event) {
...
});

<div class="target" data-id="123">
    <input type="checkbox" name="alpha" value="1" />
    <input type="checkbox" name="alpha" value="2" />
</div>

<div class="target" data-id="789">
    <input type="checkbox" name="beta" value="3" />
    <input type="checkbox" name="beta" value="4" />
</div>
4

2 に答える 2

3

<input>これは、2 つの要素のいずれかにある要素の「変更」イベントに対して呼び出される 1 つのハンドラー関数です<div>。

実際のイベントハンドラーは jQuery 内部のものであり、イベント ターゲットを調べて適切にディスパッチします。

にアタッチする場合は<body>、次のようにします。

$('body').on('change', '.target input', function() { ... });

ハンドラーから、thisになり、コンテナーを見つけるために<input>使用できます。.closest('.target')

于 2013-02-01T22:02:00.987 に答える
1

それがあなたの求めているものなら、それは2つの別々の代表団だと思います。ハンドラー関数への個別の参照が 2 つの.targetdiv のそれぞれに添付され、それぞれがチェックボックスの独自のペアによってトリガーされるイベントを処理します。

両方の div の共通の祖先にバインドする場合は、$(this).closest('.target')Pointy が提案したように、 を使用して常に含まれている div を見つけることができます。

于 2013-02-01T22:08:06.800 に答える