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

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> 的功能元素，并且在这些元素上，删除功能不起作用。如何在动态生成的元素上激活我的 javascript (jQuery) 函数？

Answer 1

使用委托(delegate):

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

一旦 UL 在 DOM 中可用，就设置它，或者将其包装在文档就绪处理程序中。