Javascript 事件未附加到服务器响应中的元素上

我有许多名为“abc”的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);
});
}

var nature=document.getElementsByName（'nature'）；
for（var i=0；i

您需要了解事件绑定是如何工作的。当您绑定HTML元素或元素集上的事件时，该事件将绑定到该页面上当前的元素。这并不意味着它将绑定到事件绑定时不可用的未来元素

当服务器返回其响应，并且这些元素被添加到页面时，绑定的事件处理程序不会应用于它们，因为绑定事件时它们不在那里。要让它们响应有问题的事件，必须调用代码再次绑定事件。这一次，由于这些元素位于页面上，事件绑定将应用于它们。一种简单的方法是将事件绑定调用封装在函数中

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

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

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

---

您不能添加有问题的代码吗？请将您的代码添加为代码，而不是屏幕截图-如果图像损坏怎么办？如果分辨率低怎么办？然后我们将无法修复您的代码。对此的答案似乎很明显，但是，正如其他人所指出的，添加代码而不是屏幕截图。我添加了我的代码。我这样称呼它，但它仍然不起作用。我在哪里出了错吗？echo（'ListenerForHeroNatures（）；'）；

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

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

bindEvents();