Home > Article > Web Front-end > JS implementation example of adding event function to dynamically added elements

JS implementation example of adding event function to dynamically added elements

亚连Original: 2018-05-26 17:30:001799browse

This article mainly introduces the JS implementation of adding events to dynamically added elements, and analyzes the related operation skills of javascript based on event delegation to add events to dynamically added elements. Friends who need it can refer to it

The example of this article describes the JS implementation of adding event functions to dynamically added elements. Share it with everyone for your reference, the details are as follows:

We sometimes create some elements through js in daily development, but if you use the original for loop to add events to the created nodes, it often does not work:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net js动态添加事件</title>
</head>
<body>
 <ul id="out-ul">
  <li class="out-li">123</li>
  <li class="out-li">123</li>
  <li class="out-li">123</li>
 </ul>
 <button id="btn">添加</button>
 <script>
  document.getElementById(&#39;btn&#39;).addEventListener(&#39;click&#39;,function(){
   var htmlFragment=&#39;<li>我是新增的li</li>&#39;;
   var addLi=document.createElement(&#39;li&#39;);
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  var outUl=document.getElementById(&#39;out-ul&#39;)
  var outLi=outUl.getElementsByClassName(&#39;out-li&#39;);
  for(var i=0;i<outLi.length;i++){
   outLi[i].onclick=function(){
    alert(1);
   }
  }
 </script>
</body>
</html>

Operation effect:

For example, the events added to li through the for loop cannot be bound to The detailed reasons for the newly added li will not be explained here. So how to solve this? In fact, the solution is simple, that is, to solve it through event delegation, directly enter the code, the above code is simply modified:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net js动态添加事件</title>
</head>
<body>
 <ul id="out-ul">
  <li class="out-li">123</li>
  <li class="out-li">123</li>
  <li class="out-li">123</li>
 </ul>
 <button id="btn">添加</button>
 <script>
  var outUl=document.getElementById(&#39;out-ul&#39;)
  var outLi=outUl.getElementsByClassName(&#39;out-li&#39;);
  document.getElementById(&#39;btn&#39;).addEventListener(&#39;click&#39;,function(){
   var htmlFragment=&#39;<li>我是新增的li</li>&#39;;
   var addLi=document.createElement(&#39;li&#39;);
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  outUl.addEventListener(&#39;click&#39;,function(e){
   e=e || window.event;//兼容ie
   alert(e.target.innerHTML);
  }, false);
 </script>
</body>
</html>

Run Effect:

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

Ajax Gets data through city name

Ajax form verification after MVC meets bootstrap

AJAX request queue implementation

The above is the detailed content of JS implementation example of adding event function to dynamically added elements. 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 ideas for using Vue to create image carousel componentsNext article：Detailed explanation of ideas for using Vue to create image carousel components

See more

JS implementation example of adding event function to dynamically added elements

Related articles