溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用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> <div> <h2>展示jQuery中on()和click()的區別</h2> </div> <div> <span>點擊生成新按鈕。NewOn生成的Delete按鈕行為用on()實現，NewClick生成的Delete按鈕行為用click()實現。</span> </div> <div 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> </div> </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里面。
以上這篇基于jquery的on和click的區別詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
