[解決済み] 直接 vs. 委任 - jQuery .on()

質問

との違いを理解しようとしています。 ダイレクト と デリゲート イベントハンドラで jQuery .on() メソッド . 具体的には、この段落の最後の文です。

を使用する場合 selector が提供されている場合、イベントハンドラは、以下のように参照されます。 デリゲート . jQuery は、イベントのターゲットからハンドラがアタッチされた要素まで（つまり、最も内側の要素から最も外側の要素まで）イベントをバブル化し、そのパスに沿ってセレクタに一致するすべての要素に対してハンドラを実行します。

runs the handler for any elements"というのはどういう意味ですか？私は テストページ を実験してみました。しかし、以下の構成はどちらも同じ動作になります。

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

または

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

どなたか、この点を明確にするために、別の例を参照していただけないでしょうか？ありがとうございます。

どのように解決するのですか？

ケース1（直接）。

$("div#target span.green").on("click", function() {...});

== div#target 内のすべての span.green に、「クリックされたら、X を実行する」というメッセージを表示させたいのです。

ケース2（委譲されたもの）。

$("div#target").on("click", "span.green", function() {...});

== おい、div#target! span.green" である子要素がクリックされたら、X を実行します。

つまり、...

ケース1では、そのスパンがそれぞれ個別に指示されています。新しいスパンができても、そのスパンは指示を聞いていないので、クリックに反応しないでしょう。それぞれのスパンは 直接責任 は、それ自身のイベントに対応します。

2の場合、コンテナのみに指示があり、コンテナはクリックに気づく責任があります。 に代わって の子要素になります。イベントをキャッチする作業は 委譲 . これは、今後作成される子要素に対しても、この命令が実行されることを意味します。