javascript - 将现有事件注册到 ajax 加载的 DOM？

Question

在我的主页上，我有这个按钮。

<button class="test">test</button>

在我当前的代码中，我有这个脚本

$('.test').on('click',function(){
        alert("YOU CLICKED ME");
    });

现在，我的应用程序是 ajax 化的，所以每次我单击一个新页面时，它都会作为 ajax 加载，问题是加载的页面也有这个按钮。它的标记是这样的

<div id ="firstDiv>
   <div id ="secondDiv">       
  <button class="test">test</button>
  </div>
</div

所以新内容也有“#test”但是当我点击那个按钮时它没有执行我创建的事件处理程序怎么办？

score 3 · Accepted Answer

var $bdy=$(document.body);     

$bdy.on('click','.test',function(){
    alert("YOU CLICKED ME");
});

现在随时追加您的 .test

score 0 · Accepted Answer

所以新内容也有“#test”但是当我点击那个按钮时它没有执行我创建的事件处理程序怎么办？

因为处理程序附加到实际元素。因此，如果删除元素并创建具有相同类的新元素，则事件不会与该新元素相关联。

您可以使用事件委托来处理此问题：

$(document.body).delegate('.test', 'click', function(){
    alert("YOU CLICKED ME");
});

或者

$(document.body).on('click', '.test', function(){
    alert("YOU CLICKED ME");
});

（他们做同样的事情，注意参数的顺序是不同的。delegate为了清楚起见，我更喜欢，但我认为大多数人都使用过度重载on方法的委托版本。）

这样做是监视点击document.body，但只有当点击通过与该选择器匹配的元素时才会触发您的处理程序（.test在这种情况下）。

score 0 · Accepted Answer

我终于找到了解决方案。我需要做的就是定义一个静态容器，就是这样

$('#staticdiv').on('click','.test',function(){
        alert("YOU CLICKED ME");
    });

这解决了这个问题

score 0 · Accepted Answer

正如您所说，内容是通过您在 AJAX 中获得的数据加载的，这是正在发生的可能情况。

这是因为当您第一次将单击事件绑定到“测试”元素时，该类是 DOM 的一部分。现在您在 ajax 调用之后添加了一些标记，元素成为 DOM 的一部分，但是现在在您编写新标记之后，您需要首先取消绑定点击事件See Here。然后重新绑定点击事件。这会将事件绑定到所有具有“test”类的元素。

PS我不知道您的实现规范，但正如其他人建议的那样，您应该将事件绑定到 id 而不是类。

4 回答 4