ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryのonとclickの違いは何ですか?
jQueryのonとclickの違いは何ですか?
- 亚连オリジナル
- 2018-06-11 17:46:412285ブラウズ
ここで、jquery に基づいて on と click の違いについて詳しく説明します。これは良い参考値なので、皆さんのお役に立てれば幸いです。
jQuery を使用して js を記述する場合、動作関数を記述するために on を使用する場合と、click を使用する場合があります。この 2 つの違いを理解することが重要です。
以下は、2 つの違いをテストするために使用される HTML コードです。
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <p> <h1>展示jQuery中on()和click()的区别</h1> </p> <p> <span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。</span> </p> <p class="test"> <button class="new" id="newon">NewOn</button> <button class="new" id="newclick">NewClick</button> <ul class="li"> <li>原先的HTML元素on<button class="deleteon">Delete</button></li> <li>原先的HTML元素click<button class="deleteclick">Delete</button></li> </ul> </p> </body> <script src="/static/js/jquery-3.1.1.min.js"></script> <script src="/static/js/test.js"></script> </html>
js ファイルは次のとおりです。
$("#newclick").click(function(){
$(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>');
});
$("#newon").click(function(){
$(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>');
});
$(".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 に存在する必要があることに注意してください。
上記は私があなたのためにまとめたものです。
関連記事:
vue レンダリング前の表示の問題に対処する方法 (詳細なチュートリアル)
Node.js で Douban データをクロールする (詳細なチュートリアル)
Vue シーケンスでのレンダリングとプラグインの読み込みについて問題 (詳細なチュートリアル)
AjaxUpLoad.js を介してファイルをアップロードするためのコード例 (詳細なチュートリアル)
以上がjQueryのonとclickの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。