jquery中关于事件绑定的问题

jquery中的事件绑定方法：

1.将事件绑定到document上，当整个dom中发生点击事件时会先判断当前点击的对象是否匹配该className，再执行点击的回调方法。适用于多组重复元素的点击事件。

$(document).on('click','.className',function(){});

2.将事件绑定到该 className的元素上，一旦该元素发生点击事件立即执行回调方法。如果是单独的元素点击事件，用此种绑定方法更为高效。缺点是只在页面加载的时候绑定一次，无法获取后加载在页面上的元素。

$('.className').on('click',function(){});

举例：

导航栏的切换动作

$(document).on("click","ul li",function(){
      $(this).addClass("changeBgColor").siblings().removeClass("changeBgColor")
    });

由于导航菜单(li)并不是写死在页面上，而是由数据库读取，并循环显示在页面上，此时用第二种绑定方法无法获取“li”，因此要用第一种绑定方式，且此时不需要判断是哪一个”li“发生了点击事件，因为$(ducoment).on()方法会自动判断是哪一个。

注：若”li“元素是写死在页面上的，则可以使用第二种绑定方式,这里需要用$(this).index()方法来判断是哪一个li发生点击事件，而上面一种方法则不需要手动进行判断。如下：

$(‘ul li’).on(“click”,function(){
$(‘ul li’).eq($(this).index()).addClass(“changeBgColor”).siblings().removeClass(“changeBgColor”)
});