Jsfiddle

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起作用。 here is another jsfiddle to show that

Answer 1

您必须委托新创建的元素，如此......

只需替换它......

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

有了这个......

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

Answer 2

您的问题是您正在将事件附加到尚未准备好接收该事件的元素。您应该将事件附加到父元素，然后您可以过滤.book。这样，无论何时添加可点击元素都无关紧要，它将起作用。这称为事件委托。您将处理事件的任务委托给另一个元素。

HTML：

<body>
    <button>Click here to add book.</button>
</body>

你的JS：

$(document).on("click", ".book", function() {
    alert('it works!');
});

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

此外，在执行此操作时，请勿将其附加到树太高的父级。您想将它附加到最近的可能父元素。我们不需要对document这样的事件进行点击事件，因为特定于哪些元素会获得此事件是个好主意。将其附加到document意味着任何具有.book类的元素都可以单击并响应相同的代码。如果您想在不同的按钮中使用不同的功能，则不能，因为它们都响应了附加到document的相同代码。

Answer 3

这些是直接绑定，它们不会处理动态添加的元素，如.book。

您可以使用.on()绑定动态添加元素的事件，如：

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

身体将是最接近的静态元素。这些类型的绑定称为委托事件。

小提琴：http://jsfiddle.net/3MpcG/2/

或者您可以在创建元素时绑定元素上的直接事件。

.appendTo('body').click(function(){
    alert('I have been clicked');
});

小提琴：http://jsfiddle.net/3MpcG/3/

两者都有优势和劣势，您可以在jQuery .on() docs页面上阅读。

点击jquery创建的元素不起作用

Jsfiddle

3 个答案: