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

这个标题很容易解释。我在一个AJAX调用中将HTML附加到我的文档中，我希望在您单击此函数生成的

标记时防止出现默认事件。这是我的密码：

$.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);

当我触发ajax事件时，会填充

.book results#results

，但当我单击

标记时，会触发默认事件。有没有办法让听众工作？如果是，怎么做？

试试：

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

尝试：

---

在试图将侦听器附加到的元素存在之前，无法应用事件侦听器。所以

$（“.bookitem”）。单击（函数（事件）{…}）

将仅绑定具有当时存在的

bookitem

类的元素

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

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

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

---

在试图将侦听器附加到的元素存在之前，无法应用事件侦听器。所以

$（“.bookitem”）。单击（函数（事件）{…}）

将仅绑定具有当时存在的

bookitem

类的元素

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

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

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

---

对于jQuery 1.7版或更高版本，请使用

.on（）

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

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

否则请使用

.delegate（）

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

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

---

对于jQuery 1.7版或更高版本，请使用

.on（）

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

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

否则请使用

.delegate（）

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

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

---

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

$.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);

$.ajax({
键入：“GET”，
url:“/api/search/info/”+id，
接受：“application/json”
}).then（功能（数据、状态、xhr）{
$（“.book results#results”）。追加（“”）；
$（“.bookitem”）。单击（函数（事件）{
event.preventDefault（）；
console.log（“你好”）；
});
}，淋浴器）；

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

$.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);

$.ajax({
键入：“GET”，
url:“/api/search/info/”+id，
接受：“application/json”
}).then（功能（数据、状态、xhr）{
$（“.book results#results”）。追加（“”）；
$（“.bookitem”）。单击（函数（事件）{
event.preventDefault（）；
console.log（“你好”）；
});
}，淋浴器）；

如果您只有一个AJAX调用来创建动态元素，那么就可以了。否则，您将最终向同一元素添加多个处理程序。如果您只有一个AJAX调用来创建动态元素，那就好了。否则，您将最终向同一元素添加多个处理程序。不起作用的不是

preventDefault（）

，而是

单击
处理程序本身。这是因为您用于绑定click事件的方式。绑定将不会应用于新添加的元素。您应该在（'click'，'.bookitem'，function（）{}）上使用
不是
preventDefault（）
不起作用，而是
单击处理程序本身。这是因为您用于绑定click事件的方式。绑定将不会应用于新添加的元素。您应该在（'click'，'.bookitem'，function（）{}）上使用