动态添加的元素不会触发动画

Question

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

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

li 元素会触发关闭动画。 我的问题是，如果某些元素是异步加载的，插件将不会“看到”这些元素并且不会触发动画。 不仅仅是AJAX，我说的是所有动态加载的元素！

代码很简单，这里有一个例子：

var $elements = 'li';

$elements.click(function() {
    $sidebar.animate({
        //animation
    });
});

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

这里有完整的代码https://github.com/dcdeiv/simple-sidebar/blob/master/jquery.simplesidebar.js

Answer 1

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

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

此代码在文档本身上绑定了一个点击侦听器，如果li 元素是绑定了侦听器的元素的子元素，则每次注册的点击都会调用回调。例如：

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

考虑这段代码：

var outer = $('#foo');
$('#bar').on('click', 'span', function()
{
    outer.append($('<span>Added</span>'));
});

这将在每次点击 bar 元素内的 span 时将 span 添加到 foo div。当您单击不是<div id='bar'> 的子代的跨度时，它不会被调用
然而，这段代码：

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

将对<div id='foo'> 元素内的 all 范围内的点击做出反应。动态和静态都一样，甚至是bar div 内的跨度。

基本经验法则：像这样阅读这些 sn-ps：

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

Answer 2

您可以在页面上呈现后绑定元素。
使用 jquery 绑定功能。