2

我有一些 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");

});
4

3 回答 3

2

你需要使用：

$(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.

于 2013-03-06T09:36:18.053 回答
2

用于.on那个

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

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

于 2013-03-06T09:36:24.757 回答
1

jQuery 不能监听在监听器被绑定之后添加的元素。要解决您的问题，您只需将代码重新排序即可：

$(document).ready(function() {

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

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

});

干杯，

特伦斯

于 2013-03-06T09:39:53.063 回答