How to use on and click in jquery

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.

<%@ 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"%> 





 

  
展示jQuery中on()和click()的区别
 

 

  点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。
 
 

  NewOn 
  NewClick
  
 
   
原先的HTML元素onDelete
 
   
原先的HTML元素clickDelete
 
  
 
 

js file is as follows:

$("#newclick").click(function(){ 
 $(".li").append('
动态添加的HTML元素clickDelete
'); 
});
$("#newon").click(function(){ 
 $(".li").append('
动态添加的HTML元素onDelete
'); 
});
$(".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!

Recommended reading:

Detailed explanation of tree shape in layui about value-passing

Ajax request data will encounter What are the problems

#jquery realizes that after clicking a link, the link changes to a custom color effect

The above is the detailed content of How to use on and click in jquery. For more information, please follow other related articles on the PHP Chinese website!