Question

所以......当我将下面的<li>追加到我的<ul>时，当我点击它们时，<div>个伪按钮都没有响应。

$('ul').append('<li class="active">'+ $('#input').val() +'<div class="delete"><span class = "icon">x</span></div><div class = "check"><span class = "icon">---</span></div></li>');

然而，如果我将完全相同的<li>硬编码到我的HTML中，按钮会完美响应。

有什么区别？

以下是其中一个点击功能作为示例。

$('.delete').click(function(){
    $(this).parent().fadeOut();
});

Answer 1

由于delete元素是动态创建的，因此您需要使用基于event delegation的事件处理程序

$('ul').on('click', '.delete', function(){
    $(this).parent().fadeOut();
});

当您使用普通事件注册模型$('.delete').click(..)时，它仅将处理程序注册到dom中已存在的元素。新添加的元素将不会了解处理程序。

Answer 2

易。您需要在将事件添加到DOM后附加事件。

$('.delete').click(function(){
 $(this).parent().fadeOut();
});

在您追加到UL后，应调用上述内容。如果追加是动态的，则每次追加后

Answer 3

假设有一个可以是任何字符串的选择器。在我们的示例中，让

var selector = '.delete';

如果您运行涉及

的代码

$(selector)

然后它会在代码运行时应用于与选择器匹配的所有标签，所以

$(selector).click

错过了您的代码，因为在您运行代码时它们不存在。

因此，您应该使用.on()来注册符合条件的任何标记。

单击动态附加<li>中的<div>伪按钮 - 为什么它们不起作用？</li> </div>

3 个答案: