时间戳

首页 > 解决方案 > 事件未附加在来自服务器的响应中的元素上

javascript - 事件未附加在来自服务器的响应中的元素上

问题描述

我有许多名为 =“abc”的 div，我在其上添加了一个事件侦听器，它们的名字它们工作正常，但是当我在服务器的响应中得到相同的 div 时，事件解除绑定。

这是我的 div

这是我添加事件的脚本

这是得到响应之前的结果

这是在收到回复后

这些工作正常

<div class="row" style="">
<div class="col-lg-12 col-md-12 col-sm-12 h-col" id="h-col">
<div class=" hero-rows">
<div class=""id="Strength" name="nature"><h5>STRENGTH</h5> 
</div>
</div>
</div>
</div>
<div class="row" style="">    
<div class="col-lg-12 col-md-12 col-sm-12 h-col" id="h-col">
<div class=" hero-rows">
<div class="" id="AGILITY" name="nature" ><h5>AGILITY</h5> 
</div>
</div>
</div>
</div>
<div class="row" style="">
<div class="col-lg-12 col-md-12 col-sm-12 h-col" id="h-col">
<div class=" hero-rows">
<div class="" id="INTELLIGENCE" name="nature" > 
<h5>INTELLIGENCE</h5></div>
</div>
</div>
</div>

这是我的脚本..

var nature = document.getElementsByName('nature');

for(var i =0; i< nature.length; i++)
{
nature[i].addEventListener('click',function()
{
    heroNatureFilter(this.id);
});
}

标签： javascriptphphtml

解决方案

您需要了解事件绑定的工作原理。当您在一个 HTML 元素或一组元素上绑定事件时，该事件将绑定到该页面上当前的元素。这并不意味着它绑定到事件绑定时不可用的未来元素。

当您的服务器返回其响应并将这些元素添加到页面时，绑定的事件处理程序不适用于它们，因为它们在绑定事件时不存在。要让他们响应相关事件，您必须调用代码再次绑定事件。这一次，由于这些元素在页面上，事件绑定将应用于它们。一种简单的方法是将事件绑定调用封装在一个函数中。

在您的情况下，您必须附上这部分：

var nature = document.getElementsByName('nature');

for(var i = 0; i < nature.length; i++) }{
   nature[i].addEventListener('click', function() {
      heroNatureFilter(this.id);
   });
}

在一个函数中，例如：

function bindEvents() {
    var nature = document.getElementsByName('nature');

    for(var i = 0; i < nature.length; i++) }{
       nature[i].addEventListener('click', function() {
          heroNatureFilter(this.id);
       });
    }
}

然后，当您的服务器响应返回时，您必须调用该函数将事件绑定到新返回的元素：

bindEvents();

推荐阅读