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

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");

});

这会将事件绑定(bind)到文档，然后“监听”您的选择器。最好将其绑定(bind)到比 document 更具体的内容以提高性能，即 a 标签容器。

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

此外，on 是在 Jquery 1.7 中引入的，如果您使用的是旧版本，则它们是几个效率较低的版本，例如 live .如果您使用 1.7 或更新版本，请使用 on。