首頁 >web前端 >js教程 >在jquery中on和click的差別有哪些？

在jquery中on和click的差別有哪些？

亚连原創: 2018-06-11 17:46:412278瀏覽

下面我就為大家分享一篇基於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(&#39;<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>&#39;); 
});
$("#newon").click(function(){ 
 $(".li").append(&#39;<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>&#39;); 
});
$(".delete").click(function(){ 
 $(this).parent().remove(); 
}); 

$(".li").on(&#39;click&#39;, ".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裡面。

上面是我整理給大家的，希望今後對大家有幫助。

如何處理vue渲染前的顯示面向問題（詳細教學）

在Node.js中爬取豆瓣資料（詳細教學）

關於在Vue渲染與外掛程式的載入順序的問題（詳細教學）

透過AjaxUpLoad.js實現文件上傳的程式碼範例（詳細教學）

詳細介紹JsChart元件使用方法以及功能

以上是在jquery中on和click的差別有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：關於$.ajax()方法參數詳解下一篇：關於$.ajax()方法參數詳解

看更多