Home > Article > Web Front-end > What are the differences between on and click in jquery?

What are the differences between on and click in jquery?

亚连Original: 2018-06-11 17:46:412253browse

Below I will share with you a detailed explanation of the difference between on and click based on jquery. It has a good reference value and I hope it will be helpful to everyone.

When using jQuery to write js, some use on to write behavior functions, and some use click. It is important to understand the difference between the two.

The following is the HTML code used to test the difference between the two.

<!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 file is as follows:

$("#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(); 
});

After the page is loaded, click the NewOn and NewClick buttons, and the page will appear as shown below.

Phenomena:

The original HTML element will be deleted when you click the Delete button behind it. As for dynamically added HTML elements, using the click() method, they cannot be deleted by clicking the Delete button; they can be deleted using the On() method.

Reason:

element.click() does not support binding events to dynamic elements or styles. Support for binding events to dynamic elements is .live() and .on(). Live is no longer recommended after jQquery 1.7. When using .on(), please note that the element before on must exist in the DOM when the page is loaded.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to deal with display issues before vue rendering (detailed tutorial)

Crawling in Node.js Douban Data (detailed tutorial)

About the loading order of rendering and plug-ins in Vue (detailed tutorial)

Implemented through AjaxUpLoad.js Code example for file upload (detailed tutorial)

Detailed introduction to the use and functions of the JsChart component

The above is the detailed content of What are the differences between on and click in jquery?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of $.ajax() method parametersNext article：Detailed explanation of $.ajax() method parameters

See more

What are the differences between on and click in jquery?

Related articles