ページ上のすべての選択ボックスをループし、.hover イベントをそれらにバインドして、マウスのオン/オフで幅を変更するコードがあります。調整。
私が抱えている問題は、最初のループの後に Ajax または DOM 経由で追加された選択ボックスにはイベントがバインドされないことです。
このプラグイン (jQuery Live Query Plugin) を見つけましたが、プラグインを使用してページにさらに 5,000 を追加する前に、jQuery を直接使用するか、他のオプションを使用して、その方法を知っている人がいるかどうかを確認したいと思いました。 。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
＃＃＃要するに：＃＃＃jQuery.fn.onのドキュメントに詳しい説明があります。したがって、以下の例では、コードを生成する前に
#dataTable tbody trが存在している必要があります。
委任されたイベントの利点は、後でドキュメントに追加される子孫要素からのイベントを処理できることです。たとえば、テーブルは存在するが、コードを使用して行が動的に追加された場合、次のように処理されます:リーリー新しい HTML がページに挿入される場合は、以下で説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチするのが最善です。リーリー まだ作成されていない子孫要素のイベントを処理できることに加えて、委任イベントのもう 1 つの利点は、多数の要素を監視する必要がある場合にオーバーヘッドを削減できることです。 tbody
に 1,000 行あるデータ テーブルで、最初のコード例は 1,000 個の要素にハンドラーをアタッチします。
に接続するだけであり、イベントは 1 レベル (クリックされたデリゲート イベント メソッド (2 番目のコード例) は、イベント ハンドラーを 1 つの要素tbodytbody
委任されたイベントはからtbody)。注:SVG では機能しません。
jQuery 1.7 以降では、
リーリーjQuery.fn.onを使用してセレクター パラメーターを設定する必要があります:イラスト:
これはイベント委任と呼ばれ、次のように機能します。このイベントは、処理される必要がある要素の静的な親 (
staticAncestors) に付加されます。この jQuery ハンドラーは、この要素またはその子孫要素の 1 つでイベントが発生するたびに起動されます。次に、ハンドラーは、イベントをトリガーした要素がセレクター (dynamicChild) と一致するかどうかを確認します。一致するものがあれば、カスタム ハンドラー関数が実行されます。それまでは、live()
ただし、: を使用することをお勧めします。 リーリーlive()
...は、次のは 1.7 で非推奨になり、on()に置き換えられ、1.9 で完全に削除されました。live()署名:リーリーon()
署名に置き換えることができます: リーリーたとえば、ページがクラス名
dosomething
イベントがバインドされているときに存在する任意の親が使用できます。例えば＃＃＃ リーリー ＃＃＃に適用されます＃＃＃ リーリーの要素を動的に作成する場合、イベントを既存の親 にバインドできます (これが問題の核心です)動的コンテンツにバインドされているものではなく、バインドされているものが必要な場合)、これは documentにすることができます (これが最も簡単なオプションです)。ただし、documentは最も効率的なオプション. ではない可能性があることに注意してください。 リーリー