jqueryでliveメソッドをonメソッドに置き換える問題の解決策を詳しく解説-jsチュートリアル-php.cn

今後追加する要素はajax splicedになります
私のonはこのように書かれています

$("td").on("click","a",function(){
alert("Aha!");
});

ログイン後にコピー

これがページのラベルです

<td><a class="topic_a" href="#creat"  name=&#39;${data.context }&#39;>选择</a></td>

ログイン後にコピー

ajax splicingタグは上記のタグと全く同じです。

しかし、接合されたラベルをクリックしても効果はありません。
なぜですか？

on を使用してバインドするときは、td が既に dom に存在していることを確認してください。
また、なぜ live が可能かというと、live は document にバインドされているためです。Document はいつでも存在します。あなたの
イベント td が存在しない場合は、絶対にバインドされません。
デリゲートに置き換えてください。
将来追加される要素にはが含まれます。 ?

が含まれる場合、イベントプロキシを $("td") にバインドできません。

イベントプロキシは上位レベルの要素にバインドする必要があります。たとえば、

または

の親要素にバインドすることもできます。 ,

$("body").on("click","a",function(){
alert("Aha!");
});

ログイン後にコピー

バインド時に使用します。
まずスプライスし、次にページに追加して、イベントをバインドします。
jsでも一行ずつ読み込まれます。

バインディングイベントは前に書いてあり、後からtdを追加した場合は当然そのようなイベントは発生しません。
また、td がページに書き込まれていることを確認してください。

ライブメソッドは
jquery
の古いバージョンでのみ使用できます
将来の要素を取得したい場合は、デリゲートメソッドのみを使用できます。次のように:

//div是页面已经有的元素，button是js生成的未来元素！
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

ログイン後にコピー

 $(document).on(&#39;click&#39;, &#39;td a&#39;, function() {
    alert("Aha!");
  });

ログイン後にコピー

 $("body").delegate("td","click",function(){
    alert("ok!");
  });

ログイン後にコピー

on を使用してバインドするとき、td は既に dom に存在します。

また、なぜ live ができるのでしょうか? live はドキュメントにバインドされているためです。ドキュメントはいつでも存在します。 .

使用する on はあなたのものですイベントは td にバインドされます。td が存在しない場合は、絶対にバインドされません。イベントプロキシの仕組みについて詳しく学んでください。

このように書くことができます

$("body").on("click","td a.topic_a",function(){
alert("Aha!");
});

ログイン後にコピー

今後追加される要素には < ;td> が含まれます。

が含まれる場合、イベントプロキシを $("td") にバインドできません。
イベントプロキシは上位の要素にバインドする必要がありますたとえば、または

の親要素にバインドする必要があります

これが不可能な場合は、本文またはドキュメントにバインドすることもできます

りー

以上がjqueryでliveメソッドをonメソッドに置き換える問題の解決策を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

jqueryでliveメソッドをonメソッドに置き換える問題の解決策を詳しく解説