Question

我的元素结构如下：

<ul>
    <li>
        <div class="tag_name">Tag Name</div>
        <div class="delete">X</div>
    </li>
    <li>
        <!-- and so long... -->
    </li>
</ul>

在jQuery中，我在$('.delete').click()上有一个$(document).ready()函数，用于删除父<li>元素。我还有一个添加<li>元素的函数，并且在这些元素上，remove函数不起作用。如何在动态生成的元素上激活我的javascript（jQuery）函数？

Answer 1

使用委托：

$('ul').on('click', '.delete', function(){
   //...
});

在DOM中提供UL后设置它，或者将其包装在文档就绪处理程序中。

Answer 2

您需要了解JQuery Delegation的重要性。

事件委托允许我们将单个事件监听器附加到父元素，将为匹配选择器的所有子项触发，这些孩子现在是还是将来加入。

在你的情况下：

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

在动态创建的对象上加载jquery行为

2 个答案: