Question

我有一些jQuery代码，以编程方式在文档就绪的元素上添加一个类。我遇到的问题是如何监听点击该类的元素。

<li><a href="#" id="btnDeleteGroup" class="disabled">Delete Node</a></li>

$(document).ready(function () {

  $('a.deleteGroup').click(function (e) {
    alert("deleteGroup"); 
  });

  $('#btnDeleteGroup').removeClass("disabled");
  $('#btnDeleteGroup').addClass("deleteGroup");

});

Answer 1

您需要使用on：

$(document).ready(function () {

  $(document).on('click', 'a.deleteGroup', (function (e) {
    alert("deleteGroup"); 
  });

  $('#btnDeleteGroup').removeClass("disabled");
  $('#btnDeleteGroup').addClass("deleteGroup");

});

这会将事件绑定到文档，然后“监听”您的选择器。为了提高性能，请优先将其绑定到比document更具体的内容，即a标记容器。

只是解释一下，如果将它绑定到文档，它将“监听”文档上发生的每个点击事件，然后说“这匹配我的选择器”。如果将它绑定到容器，它只捕获该容器上的单击事件，因此它必须处理较少的请求，因此效率更高。

在Jquery 1.7中也引入了on，如果你使用旧版本，那么它们是效率较低的版本，例如live。如果您使用的是1.7或更高版本，请使用on。

Answer 2

使用.on代替

$(document).on("click", "a.deleteGroup", function (e) {
  alert("deleteGroup"); 
});

最好将事件绑定到文档而不是绑定到该链接的某个父元素。

Answer 3

jQuery无法侦听绑定侦听器后添加的元素。要解决您的问题，您只需重新订购代码即可：

$(document).ready(function() {

  $('#btnDeleteGroup').removeClass("disabled");
  $('#btnDeleteGroup').addClass("deleteGroup");

  $('a.deleteGroup').click(function(e) {
    alert("deleteGroup"); 
  });

});

干杯，

特伦斯

如何在Jquery中向元素添加一个类，然后根据该类触发事件

3 个答案: