這次帶給大家jquery裡的on和click的使用方法，使用jquery裡的on與click的注意事項有哪些，下面就是實戰案例，一起來看一下。
使用jQuery寫js時，有些用on寫行為函數，有些用click，弄清楚二者差異很重要。
以下是用來測試二者差異的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元素點擊身後的Delete按鈕就會被刪除。而動態新增的HTML元素，使用click()這種寫法，點選Delete按鈕無法刪除；使用On()方式可以。
原因：
element.click()這種寫法不支援給動態元素或樣式綁定事件。支援給動態元素綁定事件的是.live()和.on()。 live在jQquery1.7後就不建議使用了。使用.on()時注意，on前面的元素必須在頁面載入的時候就存在DOM裡面。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是jquery裡的on和click的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
