动态绑定 .on() 方法与事件映射

Question

我使用此语法来确保事件绑定在动态添加的li元素上

$('ul.list').on('click', 'li', function() {
   //do something
});

我尝试使用这样的事件映射存档相同的内容：

$('ul.list').hammer({
    css_hacks : false
}).on({
     swipe : function(event){
        //do something
     },
     doubletap : function(event){
        //some more code
     }
}, 'li');

但它根本不起作用。如果我将事件直接绑定到 li 元素，它适用于现有元素，但不适用于动态添加的元素。

$('ul.list').find('li').hammer({
    css_hacks : false
}).on({
     swipe : function(event){
        //do something
     },
     doubletap : function(event){
        //some more code
     }
});

如何将事件映射绑定到未来的元素？

Answer 1

> 具有 2 个参数的on()与旧的bind()功能非常相似。

如果你想让它像live()一样工作，请像第一个示例中一样传递第三个参数。

此外，如果在hammer()方法上链接函数时遇到问题，请检查它并确保它返回"this"。

$('ul.list').on({
    swipe : function() { ... },
    doubletap : function() { ... }
},'li');

Answer 2

如果你查看jQuery文档，jQuery Live

它说，不支持链接方法。例如，$（"a"）.find（".offsite， .external"）.live（ ... ）;无效且无法按预期工作。

所以你可以这样做：

$('ul.list > li').hammer({
    css_hacks : false
}).live({
     swipe : function(event){
        //do something
     },
     doubletap : function(event){
        //some more code
     }
});

但它已被弃用，我认为您的第一个示例应该有效。

我试过这个：

<ul>
<li>aaa</li>
<li>bbb</li>
</ul>

和

$("ul").on({
    click:function(){
        $(this).html('clicked');
        },
    dblclick:function(){
        $(this).html('double clicked');
        }
    },'li');

它有效，所以我想你的问题可能是事件的名称。