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。