Question

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

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

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

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

现在，我的应用程序是ajaxified，所以每次我点击一个新页面它被加载为ajax，问题是加载的页面也有这个按钮。它的标记是likethis

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

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

Answer 1

var $bdy=$(document.body);     

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

现在随时附加你的.test

Answer 2

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

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

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

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

或

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

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

这样做是关注document.body上的点击，但只有当点击通过与该选择器匹配的元素（{1}}时才会触发您的处理程序。）

Answer 3

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

<button class="test">test</button>已被绘制
然后绑定到点击事件
您通过ajax
尝试绑定它没有。

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

P.S。我不知道您的实现的规范，但正如其他人所建议您应该将事件绑定到id而不是class。

Answer 4

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

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

并修复了问题

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

4 个答案: