ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryでliveメソッドをonメソッドに置き換える問題の解決策を詳しく解説

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

黄舟
リリース: 2017-06-26 09:35:21
オリジナル
1388 人が閲覧しました

今後追加する要素は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.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート