Javascript 动态添加的元素不'；不要触发动画

在我的插件中，一些元素将关闭侧边栏。例如，如果侧边栏中有一个列表：

<ul>
    <li>element 1</li>
    <li>element 2</li>
    <li>element 3</li>
</ul>

如何使这些元素对插件可见

---

这里完整的代码

动态元素不会触发回调，因为没有绑定到这些动态元素的事件侦听器。
如果要将事件处理到尚不存在的元素，或使用选择器选择动态添加的元素，则应委派事件：

$(document).on('click', 'li', function()
{
    //handle
});

这段代码在文档本身上绑定了一个click侦听器，如果

li

元素是绑定侦听器的元素的子元素，那么每次注册的click都会调用回调。例如：

<div id='foo'>
    <div id='bar'>
        <span> test</span>
    </div>
    <span> test2</span>
</div>

将对单击

元素内的所有跨距作出反应。动态和静态相似，甚至是

条内的跨度

基本经验法则：像这样阅读这些片段：

$(document).on('click',   'div',    function(){});
  <scope>     <event>  <selector>   <callback>
on event in <scope> for elements matching <selector>, apply <callback>

$（document）.on（'click'，'div'，function（）{}）；
在元素匹配的事件中，应用
在页面上呈现元素后，可以绑定该元素。

使用jquery绑定函数
 可能的dup大多数插件要么1）使用委派的事件，这样就可以正常工作，要么2）它们有一个您调用的
刷新
选项（此加载项似乎没有），或者3）您必须重新运行它们（有时在清理完它们可以进行的初始重新格式化后）或者4）它永远不会工作，需要重新编写。这也适用于非动态添加的元素吗？@dcdeiv:是的。在事件（单击）冒泡到更高的DOM元素（在本例中为
文档
）后，它将应用jQuery筛选器。@dcdeiv:是的，添加了一些详细信息以完成回答为什么？委派只需要一个侦听器。句号，故事的结尾。。。没有凌乱的
。绑定
需要担心的东西
var outer = $('#foo');
$('#bar').on('click', 'span', function()
{
    outer.append($('<span>Added</span>'));
});

$('#foo').on('click', 'span', function()
{
    console.log(this);
});

$(document).on('click',   'div',    function(){});
  <scope>     <event>  <selector>   <callback>
on event in <scope> for elements matching <selector>, apply <callback>