Javascript 使用事件映射动态绑定.on（）方法

我使用这种语法来确保事件绑定到动态添加的

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
     }
});

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

on（）

具有两个参数，与旧的

bind（）

功能相当

如果要使其像

live（）

那样工作，请像第一个示例中那样传递第三个参数

此外，如果在

hammer（）

方法上链接函数时遇到问题，请检查它并确保它返回“this”

---

如果您查看jquery文档

它说，链接方法不受支持。例如，$（“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>

---

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

第一种方法应该有效。jQuery的

on（）

方法被推荐优于

live（）

和

bind（）

同意@Silasj-bug-in-on？我对此做了一些尝试，似乎它可能是@Paul建议的一个bug。下一个最好的解决方案是链接.on（）事件：.on（'swipe'，'li'，function）。on（'doubletap'，'li'，function）如果hammer插件未写入返回元素并允许链接，请尝试反转

on（）

和

hammer（）

事件的名称来自hammer.js。我的上一个示例可以很好地处理这些名称，我必须包含jquery.specialevent.hammer.js才能获得授权支持。默认的jquery.hammer.js不支持

live（）；on（）

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

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