javascript - 单击 jquery 创建的元素不起作用

Question

我使用 Jquery 创建了一个元素并赋予它类 .book:

jQuery('<div/>', {
    name: "my name",
    class: 'book',
    text: 'Bookmark',
}).appendTo('body');

然后我想在点击该类时做一些事情，所以自然而然地写了一个简单快捷的:

$('.book').click(function(){
    alert('I have been clicked');
});

有效

什么不起作用，如果我让它在点击时添加这些元素。所以以下不起作用:

var bms = 0;
$('button').click(function(){
    bms += 1;
    jQuery('<div/>', {
        name: bms,
        class: 'book',
        text: 'Bookmark ' + bms
    }).appendTo('body');
});
$('.book').click(function(){
    alert('I have been clicked');
});

为什么会发生这种情况，我该如何解决？

Jsfiddle

另一件事:

此外，如果我的 body 中已经有一个类为 .book 的 div，则点击事件将作用于该类，但不会作用于任何附加的 div秒。 here is another jsfiddle to show that

Answer 1

你必须委托(delegate)给新创建的元素，就像这样......

只需替换这个...

$('.book').click(function(){
  alert('I have been clicked');
});

有了这个....

$(document).on('click','.book', function(){
  alert('I have been clicked');
});