点击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

另一件事:

此外,如果我已经.book在我的身体中有一个div ,那么click事件将适用于那个,但不是任何附加div的.这是另一个证明这一点的方法

Answer 1

你必须委托给新创建的元素,就像这样......

只需更换这个......

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

有了这个....

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