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) {...});只会绑定当时存在的bookitem类的元素。

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

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

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

Answer 2

对于jQuery 1.7或更高版本，请使用.on() ...

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

否则使用.delegate() ...

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

Answer 3

尝试：

$(".book-results").on('click','a',function(event) {
  event.preventDefault();
  console.log("HELLO");
});

Answer 4

您必须在创建元素后附加事件...

$.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>");
    $(".bookitem").click(function(event) {
       event.preventDefault();
       console.log("HELLO");
    });
}, showErr);

附加的html上的preventDefault（）不起作用。为什么？

4 个答案: