Home > Article > Web Front-end > How to use on and click in jquery

How to use on and click in jquery

php中世界最好的语言Original: 2018-03-15 10:31:584273browse

This time I will bring you how to use on and click in jquery. What are the precautions for using on and click in jquery. The following is a practical case. Get up and take a look.

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('<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(); 
});

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

Phenomenon:

The original HTML element will be ## clicked on the Delete button behind it #delete. 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 jQquery1.7. When using .on(), please note that the element before on must exist in the DOM when the page is loaded.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use on and click in jquery

Related articles