亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

動(dòng)的要素イベント バインディング: 動(dòng)的に作成された要素にイベントをバインドするにはどうすればよいですか?
P粉046878197
P粉046878197 2024-03-25 15:37:38
0
2
1066

ページ上のすべての選択ボックスをループし、.hover イベントをそれらにバインドして、マウスのオン/オフで幅を変更するコードがあります。調(diào)整。

これは、ページの準(zhǔn)備が完了し、適切に動(dòng)作している場(chǎng)合に発生します。

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

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

P粉046878197
P粉046878197

全員に返信(2)
P粉864594965

jQuery.fn.on のドキュメントに詳しい説明があります。

###要するに:###

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

#dataTable tbody tr

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

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

リーリー まだ作成されていない子孫要素のイベントを処理できることに加えて、委任イベントのもう 1 つの利點(diǎn)は、多數(shù)の要素を監(jiān)視する必要がある場(chǎng)合にオーバーヘッドを削減できることです。 tbody

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

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

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

tbody からtbody)。 注:

委任されたイベントは

SVG では機(jī)能しません。

P粉722409996

jQuery 1.7 以降では、jQuery.fn.on を使用してセレクター パラメーターを設(shè)定する必要があります:

リーリー

イラスト:

これはイベント委任と呼ばれ、次のように機(jī)能します。このイベントは、処理される必要がある要素の靜的な親 (staticAncestors) に付加されます。この jQuery ハンドラーは、この要素またはその子孫要素の 1 つでイベントが発生するたびに起動(dòng)されます。次に、ハンドラーは、イベントをトリガーした要素がセレクター (dynamicChild) と一致するかどうかを確認(rèn)します。一致するものがあれば、カスタム ハンドラー関數(shù)が実行されます。


それまでは、live(): を使用することをお?jiǎng)幛幛筏蓼埂?リーリー

ただし、

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

...は、次の

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


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

dosomething の要素を動(dòng)的に作成する場(chǎng)合、イベントを 既存の親 にバインドできます (これが問(wèn)題の核心です)動(dòng)的コンテンツにバインドされているものではなく、バインドされているものが必要な場(chǎng)合)、これは document にすることができます (これが最も簡(jiǎn)単なオプションです)。ただし、document は最も効率的なオプション . ではない可能性があることに注意してください。 リーリー

イベントがバインドされているときに存在する任意の親が使用できます。例えば### リーリー ###に適用されます### リーリー
最新のダウンロード
詳細(xì)>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート