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元素内的跨度时，这将向foo div添加跨距。单击不是<div id='bar'>的子项的跨距时，不会调用它但是这段代码：

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

会对<div id='foo'>元素中所有跨度的点击作出反应。动态和静态相似，甚至是bar div内的跨度。

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

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

Answer 2

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

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

2 个答案: