jQueryでonとclickを使用する方法

今回はjqueryでのonとclickの使い方と、jqueryでonとclickを使う際の注意点についてお届けします。実際の事例を見てみましょう。

jQuery を使用して js を記述する場合、動作関数を記述するために on を使用する場合と、click を使用する場合があります。この 2 つの違いを理解することが重要です。

以下は、2 つの違いをテストするために使用される HTML コードです。

nbsp;html>


 


<meta>


 <p>
  </p><h1 id="展示jQuery中on-和click-的区别">展示jQuery中on()和click()的区别</h1>
 
 <p>
  <span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。</span>
 </p>
 <p>
  <button>NewOn</button> 
  <button>NewClick</button>
  </p>

     
• 原先的HTML元素onDelete
     
• 原先的HTML元素clickDelete
    

    <script></script> <script></script>

js ファイルは次のとおりです。

$("#newclick").click(function(){ 
 $(".li").append('

动态添加的HTML元素clickDelete

');  }); $("#newon").click(function(){   $(".li").append('

动态添加的HTML元素onDelete

');  }); $(".delete").click(function(){   $(this).parent().remove();  });  $(".li").on('click', ".deleteon", function(){  $(this).parent().remove();  }) $(".deleteclick").click(function(){   $(this).parent().remove();  });

ページが読み込まれた後、NewOn ボタンと NewClick ボタンをクリックすると、次のようなページが表示されます。

現象:

元の HTML 要素の後ろにある [削除] ボタンをクリックすると、元の HTML 要素が 削除 されます。動的に追加された HTML 要素については、click() メソッドを使用すると、[削除] ボタンをクリックしても削除できません。On() メソッドを使用すると削除できます。

理由:

element.click() は、動的要素またはスタイルへのイベントのバインドをサポートしていません。イベントを動的要素にバインドするためのサポートは、.live() および .on() です。 jQquery 1.7 以降、Live は推奨されなくなりました。 .on() を使用する場合は、ページが読み込まれるときに on より前の要素が DOM に存在する必要があることに注意してください。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

値の取得と受け渡しに関するlayuiのツリー形状の詳細な説明

ajaxでデータをリクエストするときにどのような問題が発生しますか?

jqueryの実装リンクすると、リンクがカスタムカラー効果に変わります

以上がjQueryでonとclickを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。