javascript - 附加 html 上的 PreventDefault( ) 不起作用。为什么？

Question

标题是非常不言自明的。我正在 AJAX 调用中将 HTML 附加到我的文档，并且我想在您单击 <a> 时阻止默认事件。该函数生成的标签。这是我的代码:

$.ajax({
type: 'GET',
url: "/api/search/info/" +id,
accepts: 'application/json'
}).then(function(data, status, xhr) {
  $(".book-results #results").append("<a class='bookitem' href='b"+data.value+"'>Add Book</a>");
}, showErr);

在同一个 javascript 文件内(但不在 AJAX 函数内)，我有这个监听器:

$(".bookitem").click(function(event) {
  event.preventDefault();
  console.log("HELLO");
});

当我触发ajax事件时，.book-results #results已填充，但是当我单击 <a> 时标记默认事件被触发。有没有办法让监听器工作？如果是这样，怎么办？

Answer 1

在尝试附加监听器的元素存在之前，您无法应用事件监听器。所以 $(".bookitem").click(function(event) {...}); 只会绑定(bind)当时存在的 bookitem 类的元素.

如果要动态添加元素，则需要在创建这些元素后将事件处理程序附加到这些元素，或者更好的是使用委托(delegate)。

对于委托(delegate)，您将事件处理程序附加到父元素，例如:

$(".book-results #results").on("click",".bookitem", function(event) {
    // your handler goes here.
});