javascript - jQuery 点击事件不会在超链接上触发

Question

我使用的是jquery 2.1.4

我动态创建一个包含超链接的列表来触发函数。

$.getJSON('json_data.php', { method: 'getCertifications', userId: userId }, function(data) {
          $.each(data, function(key, value) {
             i++;
             $("#certificationCount").text("Total - " + i);
             $("#userCertifications").append('<div class="usercert"><li>' + value.certName + '</li><a href="#" data-id="' + value.certName + '">X</a></div>');
          });
      });

然后我想在用户单击“X”超链接时调用一个函数。但是，该函数并未被调用。

$(document).ready(function() {
       $(".usercert a").on('click', 'a', function(e) {
          console.log("It works!");
          alert("It works!");
       });
    });

为什么文档中的函数ready没有触发？

Answer 1

这归结为对 jQuery 中委托(delegate)事件处理程序的一些误解。

你有:

$(".usercert a").on('click', 'a', function(e) {
   console.log("It works!");
   alert("It works!");
});

但你可能想要:

$("#userCertifications").on('click', '.usercert a', function(e) {
   console.log("It works!");
   alert("It works!");
});

首先，您绑定(bind)到绑定(bind)时存在的元素，在本例中为 #userCertifications元素(我做出这个假设是基于您在 AJAX 回调中将元素附加到此元素的事实)。这样你实际上就选择了一些东西，所以 .on()方法调用实际上是在做一些事情。

其次你会告诉.on()您希望为委托(delegate)事件处理程序匹配什么选择器。在这种情况下，我们将使用 .usercert a因为我们想要运行事件处理程序的每个元素都将与此选择器匹配:#userCertifications .usercert a .

jQuery 的文档 .on() : http://api.jquery.com/on/#on-events-selector-data