JS adds events to dynamically added elements (code attached)-JS Tutorial-php.cn

JS adds events to dynamically added elements (code attached)

php中世界最好的语言

Release： 2018-05-03 16:25:51

Original

2324 people have browsed it

This time I will bring you JS to add events to dynamically added elements (with code). What are the precautions for JS to add events to dynamically added elements. The following is a practical case, let’s take a look.

We sometimes create some elements through js in daily development, but if we 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>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('btn').addEventListener('click',function(){
   var htmlFragment='<li>我是新增的li</li>';
   var addLi=document.createElement('li');
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  var outUl=document.getElementById('out-ul')
  var outLi=outUl.getElementsByClassName('out-li');
  for(var i=0;i<outLi.length;i++){
   outLi[i].onclick=function(){
    alert(1);
   }
  }
 </script>
</body>
</html>

Copy after login

Running effect:

#For example, the events added to li through the for loop cannot be bound to the newly added li. The detailed reasons will not be explained here. So how to solve this? In fact, the method is also simple, which is to solve it through event delegation and 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('out-ul')
  var outLi=outUl.getElementsByClassName('out-li');
  document.getElementById('btn').addEventListener('click',function(){
   var htmlFragment='<li>我是新增的li</li>';
   var addLi=document.createElement('li');
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  outUl.addEventListener('click',function(e){
   e=e || window.event;//兼容ie
   alert(e.target.innerHTML);
  }, false);
 </script>
</body>
</html>

Copy after login

I believe you have mastered the method after reading the case in this article. More Please pay attention to other related articles on the php Chinese website!