動的に作成された要素にイベント バインドしますか?

Question

ページ上のすべての選択ボックスをループし、.hover イベントをバインドして、 マウスをオン/閉じる <で幅を変更するコードがあります。 ;/コード>。

これは、ページの準備が整い、適切に動作しているときに発生します。

私が抱えている問題は、最初のループの後に Ajax または DOM 経由で追加された選択ボックスにはイベントがバインドされていないことです。

このプラグイン (jQuery Live Query Plugin) を見つけましたが、プラグインを使用してページにさらに 5,000 を追加する前に、jQuery を直接使用するか、他の方法を使用して、その方法を知っている人がいるかどうかを確認したいと思いました。オプション。

Answer 1

jQuery.fn.on については、ドキュメント 一个>.

に詳しい説明があります。 ＃＃＃要するに：＃＃＃

したがって、以下の例では、コードを生成する前に

#dataTable tbody tr

が存在する必要があります。 リーリー 新しい HTML がページに挿入される場合は、以下で説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチするのが最善です。

委任されたイベントの利点は、後でドキュメントに追加される子孫要素からのイベントを処理できることです。たとえば、テーブルは存在するが、コードを使用して行が動的に追加された場合、次のように処理されます:

リーリー まだ作成されていない子孫要素のイベントを処理できることに加えて、委任イベントのもう 1 つの利点は、多数の要素を監視する必要がある場合にオーバーヘッドを削減できることです。 tbody

に 1,000 行あるデータ テーブルで、最初のコード例は 1,000 個の要素にハンドラーをアタッチします。

デリゲート イベント メソッド (2 番目のコード例) は、イベント ハンドラーを 1 つの要素 tbody

に接続するだけであり、イベントは 1 レベル (クリックされた

tr ## から) バブルアップするだけで済みます。 # から tbody)。 注: 委任されたイベントは

SVG

では機能しません。

Answer 2

jQuery 1.7 以降では、セレクター パラメーターを設定した jQuery.fn.on を使用する必要があります。 リーリー

イラスト:

これはイベント委任と呼ばれ、次のように機能します。このイベントは、処理される必要がある要素の静的な親 (

staticAncestors) に付加されます。この jQuery ハンドラーは、この要素またはその子孫要素の 1 つでイベントが発生するたびに起動されます。次に、ハンドラーは、イベントをトリガーした要素がセレクター (dynamicChild) と一致するかどうかを確認します。一致するものがあれば、カスタム ハンドラー関数が実行されます。

---

それまでは、live(): を使用することをお勧めします。 リーリー ただし、

live()

は 1.7 で非推奨になり、on() に置き換えられ、1.9 で完全に削除されました。 live() 署名: リーリー ...は、次の

on() 署名に置き換えることができます: リーリー

たとえば、ページがクラス名

---

dosomething

の要素を動的に作成する場合、そのイベントを 既存の親 (イベントのコア) にバインドできます。ここでの問題は、動的コンテンツにバインドするのではなく、バインドする既存のものが必要であるということです。これは (そして最も簡単なオプションは) document です。ただし、document は最も効率的なオプション ではない可能性があることに注意してください。 リーリー イベントがバインドされているときに存在する任意の親が使用できます。例えば＃＃＃ リーリー ＃＃＃に適用されます＃＃＃ リーリー