javascript - 两个提到的语法是否在 jquery 的“on”函数中有所区别？

Question

我想知道以下两种语法有什么区别？

1：

$('#highlights').on(
    'click', 'li', function(){
        var id = this.id;
        var url = $(this).data('imgurl');
        alert(url);
    }
);

2：

$('#highlights li').on(
    'click', function(){
        var id = this.id;
        var url = $(this).data('imgurl');
        alert(url);
    }

);

Answer 1

第一个适用于#highlights 元素中的任何li，第二个适用于绑定click 函数时#highlights 元素中的任何li。即 - 如果我使用 jquery 来做：

 $('#highlights li').on('click', function(){
    var id = this.id;
    var url = $(this).data('imgurl');
    alert(url);
});

$('#highlights').append('<li>click this</li>');

如果我点击那个新元素，什么都不会发生。使用第一个它仍然可以工作。

Answer 2

第一种方法适用于绑定事件处理程序后附加到 DOM 的元素，类似于live曾经使用过的方法。第二个不会将事件处理程序附加到附加到 DOM 的元素上，但适用于加载 DOM 时存在的元素。

工作示例 http://jsfiddle.net/FhpJp/1/