This article mainly introduces to you the relevant information about the repeated execution of programs caused by dynamically adding elements and binding events in JS. The article introduces it in detail through sample code, which has certain reference value for everyone's study or work. Friends who need it can come and take a look below.
Preface
This article mainly shares with you the bug encountered some time ago. This bug is about jquery’s on method binding interactive events. Code similar to $('#point').on('click','.read-more',function () {}) causes repeated execution of the program. Many people wrote in the article When we arrived, we also talked about using the off method to unbind, but they failed to point out the essence of the problem. They almost ignored that the essence of the problem was actually caused by event delegation.
Without further ado, here are the codes I see every day:
##The first type:
$(document).on('click', function (e) {
consol.log('jquery事件绑定')
});
Second type:
document.addEventListener('click',function (e) {
consol.log('原生事件绑定')
})；
Third type:
var id = setInterval(function () {
console.log('定时器循环事件绑定')
},1000)； I believe many allies write the code above every day Well, seemingly simple event binding can often bring us unexpected results, especially in this era where SPA and AJAX page partial refresh are so popular. So what is event binding, and what causes repeated execution of programs? It seems that this matter is not that simple to clear, so let’s use a test code to illustrate it. You can copy it locally and try it yourself: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="add_but">点击</button>
<p id="point">fdfsdf
</p>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script>
var count=1;
var example = {
getData:function () {
var data ={
content:'df'+count++,
href:''
};
this.renderData(data);
},
renderData:function (data) {
document.getElementById('point').innerHTML='<p>this is a '+data.content+'点此<a class="read-more" href="javasript:;" rel="external nofollow" rel="external nofollow" >查看更多</a></p>';
$('#point').on('click','.read-more',function () {
alert('事故发生点');
})
/* setInterval(function () {
console.log('fdfdfg');
},2000);*/
/*用冒泡来绑定事件，类似于Jquery的on绑定事件*/
/* document.querySelector('body').addEventListener('click',function (e) {
if(e.target.classList.contains('read-more')){
alert('事故发生点');
}
})*/
}
} ;
document.querySelector('.add_but').addEventListener('click',function (e) {
example.getData();
e.stopImmediatePropagation();
});
</script>
</body>
</html>The above is a test code I wrote to clarify this matter. You can copy it and try it. When we click the button on the page, the function example.getData() is triggered. After simulating ajax to obtain the data successfully, the content of the element class named point in the page will be refreshed locally, and at the same time, this function will be loaded. The read-more A tag in the content is bound to an event, and the effect we want appears. When the element is loaded for the first time, the page is normal, and the 'accident point' pops up once. When the second refresh is triggered, you You will find that it pops up twice, and the third time, you will find that it pops up three times, and so on. . . .
Restore the truth
In fact, the above code is for The code specially written for testing, except for the timer, the other two click events are written in a normal way. Repeated execution will not occur. The normal code:
// jquery 事件直接绑定的写法；
$('#point .read-more').on('click',function () {
alert('事故发生点');
})
// 原生JS 事件直接绑定的写法；
document.querySelector('.read-more').addEventListener('click',function (e) {
alert('事故发生点');
}) Do you see the difference? In fact That is, there is no need to bubble up event delegation, but directly bind events to the added elements. So Dom events make sense. For dynamically added elements, events are dynamically bound to this element. After the element is deleted, the corresponding event bound to it will actually be deleted from the event binding queue , rather than the above test code, which gives the impression that after the element is removed, its bound events are still in the memory. But please remember, this is a misunderstanding. The code tested above gives this illusion because we do not bind events to dynamically added elements, but only use the form of event delegation. , in fact, the event is bound to the #point element, which always exists. Event bubbling is used to let the program know that we clicked on the dynamically added link element. In the test, native js was specially used to reproduce the event delegation. The principle of jquery's on binding event is basically the same.
document.querySelector('body').addEventListener('click',function (e) {
if(e.target.classList.contains('read-more')){
alert('事故发生点');
}
})
Those methods to eliminate bugs
Timer
This is the most common mistake The error is of course the easiest to solve, because when setting the timer, it will return a value. This value should be a number in the timer in the event queue, similar to 9527; the step is to set a global variable to Keep this return value id, and every time you set the timer, first clear the timer that has been set by id
clearInterval(intervalId); //粗暴的写法
intervalId&&clearInterval(intervalId); //严谨的写法
intervalId=setInterval(function () {
console.log('fdfdfg');
},2000);
Dom event
In fact, we above As mentioned before, the most direct way is not to use event delegation, but to use direct binding; if you really want to use event delegation to bind events, then unbind. The unbind function is provided in jquery to unbind events. However, after jquery version 1.8, this method is no longer recommended, and the off method is recommended. For example, in the on event delegation method above, to unbind, you can use the statement$('#point').off('click','.read-more').
有缺陷的解决方案，添加flag
很好理解，第一次绑定后，flag置位，下一次在执行这个绑定时,程序就知道在这个节点上已经有了绑定，无需再添加，具体操作就是：
var flag = false;
var example = {
getData: function () {
var data = {
content: 'df' + count++,
href: ''
};
this.renderData(data);
},
renderData: function (data) {
document.getElementById('point').innerHTML = '<p>this is a ' + data.content + '点此<a class="read-more" href="javasript:;" rel="external nofollow" rel="external nofollow" >查看更多</a></p>';
!flag && $('#point').on('click', '.read-more', function () {
alert('事故发生点'+data.content);
});
flag = true;
}
};从逻辑上，看起来没有问题，但仔细观察，发现这是有问题的。当我们第二次，第三次刷新时，弹出框的内容还是和第一次模拟刷新后点击后弹出的内容一致，还是'事故发生点df1'，而非和内容一样递增，为什么呢，感觉事件队列里面的回调函数被单独保存起来了，data被深拷贝了，而不再是一个引用。确实有点难理解，我也不知道到底是为什么，如果哪位能说清楚，还请一定告知。
结个尾写在最后，其实平常写一些程序时，事件绑定，造成程序重复执行这些情况很少发生，其通常会出现在我们写插件的时候，插件需要适应多种调用环境，所以在插件内部做到防止事件重复绑定的情况非常重要。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
The above is the detailed content of How to add elements dynamically in JS. For more information, please follow other related articles on the PHP Chinese website!
Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AMPython is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.
Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AMPython and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.
From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AMThe shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.
JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AMDifferent JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.
Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AMJavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.
Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AMI built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing
How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AMThis article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base
JavaScript: Exploring the Versatility of a Web LanguageApr 11, 2025 am 12:01 AMJavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
SublimeText3 Chinese version
Chinese version, very easy to use
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SublimeText3 English version
Recommended: Win version, supports code prompts!
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
