快捷導(dǎo)航

基于jquery的on和click的區(qū)別詳解

更新時(shí)間：2018年01月15日 14:32:13 作者：阿Bin先生

下面小編就為大家分享一篇基于jquery的on和click的區(qū)別詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

使用jQuery寫js時(shí)，有些用on寫行為函數(shù)，有些用click，弄清二者區(qū)別很重要。

以下是用于測試二者區(qū)別的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>
  <h1>展示jQuery中on()和click()的區(qū)別</h1>
 </div>
 <div>
  <span>點(diǎn)擊生成新按鈕。NewOn生成的Delete按鈕行為用on()實(shí)現(xiàn)，NewClick生成的Delete按鈕行為用click()實(shí)現(xiàn)。</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>動(dòng)態(tài)添加的HTML元素click<button class="deleteclick">Delete</button></li>'); 
});
$("#newon").click(function(){ 
 $(".li").append('<li>動(dòng)態(tài)添加的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(); 
});

頁面加載后，點(diǎn)擊NewOn和NewClick按鈕，頁面如下圖所示。

現(xiàn)象：

原先的HTML元素點(diǎn)擊其身后的Delete按鈕就會(huì)被刪除。而動(dòng)態(tài)添加的HTML元素，使用click()這種寫法，點(diǎn)擊Delete按鈕無法刪除；使用On()方式可以。

原因：

element.click()這種寫法不支持給動(dòng)態(tài)元素或樣式綁定事件。支持給動(dòng)態(tài)元素綁定事件的是.live()和.on()。live在jQquery1.7后就不推薦使用了。使用.on()時(shí)注意，on前面的元素必須在頁面加載的時(shí)候就存在DOM里面。

以上這篇基于jquery的on和click的區(qū)別詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: