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

Dynamically added elements don't trigger the animation

本文关键字：动画 添加 元素 动态      更新时间：2023-09-26

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

<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

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

$(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时向foodiv添加span。当您单击非<div id='bar'>
的子span时，它将不会被调用。但是下面的代码:

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

将对点击中的所有 span在<div id='foo'>元素作出反应。动态和静态都一样，甚至是bardiv内的span。

基本的经验法则:像这样阅读这些代码片段:

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

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

相关文章：