2

我使用这种语法来确保事件绑定在动态添加的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
     }
});

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

4

2 回答 2

2

on()有 2 个参数相当于旧bind()功能。

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

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

$('ul.list').on({
    swipe : function() { ... },
    doubletap : function() { ... }
},'li');
于 2012-12-10T22:24:08.773 回答
0

如果你查看 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');

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

于 2012-12-10T23:09:17.737 回答