Web Front-end
JS Tutorial
How to solve the problem that dynamically added elements cannot trigger binding events using jQuery
How to solve the problem that dynamically added elements cannot trigger binding events using jQuery
This article mainly introduces the solution to the problem that jQuery dynamically added elements cannot trigger binding events. It analyzes the reasons why dynamically added elements cannot bind events and related solutions in the form of examples. Friends in need can refer to the following
The example in this article describes the solution to the problem that jQuery dynamically added elements cannot trigger binding events. Share it with everyone for your reference, the details are as follows:
I recently encountered a problem, that is, after using jquery to dynamically add elements, I found that the dynamically added elements could not trigger events. Later, I checked some information on the Internet and found that it was supposed to be handled like this:
First, let’s talk about my error code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" >
<script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
//这里是动态添加元素
$(".add").click(function(){
var btn = $("<button class='newBtn btn btn-default'>新按钮</button>");
$("body").append(btn);
})<br><br>//这里是为添加的元素添加事件
$(".newBtn").click(function(){
alert("这里是新添加的元素触发的事件");
})
})
</script>
</head>
<body>
<button class=" add btn btn-default">添加按钮</button>
</body>
</html>Here’s my solution
Method 1: Bind live events (live events are only supported below jquery 1.9, not higher versions).
$(".newBtn").live("click",function(){
///jquery 1.9(不包括1.9)以下可以
alert('这里是动态元素添加的事件');
})Method 2: Use on() event binding($(ParentEle).on("click",".thisEle",function(){ })
$("body").on("click", ".newBtn", function() {
alert('这里是动态元素添加的事件');
});
//这里的ParentEle是 thisEle的父辈元素或者祖先元素，ParentEle可以是document，也可以是body等。
//注意：如果此时调用的函数是外部定义好的函数，那在调用的时候不要加()，不然会跳过点击事件直接触发函数$("body").on("click", ".newBtn",aa );
function aa(){
alert('这里是动态元素添加的事件');
}The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to use jQuery CSS Implement table table
Use http module to send requests through nodejs (detailed tutorial)
How to use Angular to implement internationalization (detailed tutorial)
The above is the detailed content of How to solve the problem that dynamically added elements cannot trigger binding events using jQuery. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to solve mysql cannot connect to local host
Apr 08, 2025 pm 02:24 PM
The MySQL connection may be due to the following reasons: MySQL service is not started, the firewall intercepts the connection, the port number is incorrect, the user name or password is incorrect, the listening address in my.cnf is improperly configured, etc. The troubleshooting steps include: 1. Check whether the MySQL service is running; 2. Adjust the firewall settings to allow MySQL to listen to port 3306; 3. Confirm that the port number is consistent with the actual port number; 4. Check whether the user name and password are correct; 5. Make sure the bind-address settings in my.cnf are correct.
How to solve mysql cannot be started
Apr 08, 2025 pm 02:21 PM
There are many reasons why MySQL startup fails, and it can be diagnosed by checking the error log. Common causes include port conflicts (check port occupancy and modify configuration), permission issues (check service running user permissions), configuration file errors (check parameter settings), data directory corruption (restore data or rebuild table space), InnoDB table space issues (check ibdata1 files), plug-in loading failure (check error log). When solving problems, you should analyze them based on the error log, find the root cause of the problem, and develop the habit of backing up data regularly to prevent and solve problems.
Unable to log in to mysql as root
Apr 08, 2025 pm 04:54 PM
The main reasons why you cannot log in to MySQL as root are permission problems, configuration file errors, password inconsistent, socket file problems, or firewall interception. The solution includes: check whether the bind-address parameter in the configuration file is configured correctly. Check whether the root user permissions have been modified or deleted and reset. Verify that the password is accurate, including case and special characters. Check socket file permission settings and paths. Check that the firewall blocks connections to the MySQL server.
Solutions to the errors reported by MySQL on a specific system version
Apr 08, 2025 am 11:54 AM
The solution to MySQL installation error is: 1. Carefully check the system environment to ensure that the MySQL dependency library requirements are met. Different operating systems and version requirements are different; 2. Carefully read the error message and take corresponding measures according to prompts (such as missing library files or insufficient permissions), such as installing dependencies or using sudo commands; 3. If necessary, try to install the source code and carefully check the compilation log, but this requires a certain amount of Linux knowledge and experience. The key to ultimately solving the problem is to carefully check the system environment and error information, and refer to the official documents.
Navicat's solution to the database cannot be connected
Apr 08, 2025 pm 11:12 PM
The following steps can be used to resolve the problem that Navicat cannot connect to the database: Check the server connection, make sure the server is running, address and port correctly, and the firewall allows connections. Verify the login information and confirm that the user name, password and permissions are correct. Check network connections and troubleshoot network problems such as router or firewall failures. Disable SSL connections, which may not be supported by some servers. Check the database version to make sure the Navicat version is compatible with the target database. Adjust the connection timeout, and for remote or slower connections, increase the connection timeout timeout. Other workarounds, if the above steps are not working, you can try restarting the software, using a different connection driver, or consulting the database administrator or official Navicat support.
Is the company's security software causing the application to fail to run? How to troubleshoot and solve it?
Apr 19, 2025 pm 04:51 PM
Troubleshooting and solutions to the company's security software that causes some applications to not function properly. Many companies will deploy security software in order to ensure internal network security. ...
Can mysql store arrays
Apr 08, 2025 pm 05:09 PM
MySQL does not support array types in essence, but can save the country through the following methods: JSON array (constrained performance efficiency); multiple fields (poor scalability); and association tables (most flexible and conform to the design idea of relational databases).
What are the common misunderstandings in CentOS HDFS configuration?
Apr 14, 2025 pm 07:12 PM
Common problems and solutions for Hadoop Distributed File System (HDFS) configuration under CentOS When building a HadoopHDFS cluster on CentOS, some common misconfigurations may lead to performance degradation, data loss and even the cluster cannot start. This article summarizes these common problems and their solutions to help you avoid these pitfalls and ensure the stability and efficient operation of your HDFS cluster. Rack-aware configuration error: Problem: Rack-aware information is not configured correctly, resulting in uneven distribution of data block replicas and increasing network load. Solution: Double check the rack-aware configuration in the hdfs-site.xml file and use hdfsdfsadmin-printTopo
