cari

Rumah >hujung hadapan web >tutorial js >在jquery中on和click的区别有哪些？

在jquery中on和click的区别有哪些？

亚连
亚连asal
2018-06-11 17:46:412285semak imbas

下面我就为大家分享一篇基于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组件使用方法以及功能

Atas ialah kandungan terperinci 在jquery中on和click的区别有哪些？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于$.ajax()方法参数详解Artikel seterusnya：详解JavaScript的变量及作用域

Artikel berkaitan

Lihat lagi