jquery click与on使用问题

Question

$('.aa').click(function(){
 $(this).addClass('bb');
});

$(document).on('click','.bb',function(){
alert(123);
});

为什么点击aa会直接触发bb的事件，将aa的click事件换成on的写法就不会触发，请教大神们为什么？

Answer 1

$('.aa').on("click", function(){
    $(this).addClass('bb');
});    
$(document).on('click','.bb',function(){
    alert(123);
});

lz说的on的写法是和上面一样么？这样实际上是会被触发的，因为在$('.aa')上触发之后，事件继续冒泡到document上，然后触发alert。

Answer 2

你这不是两种写法，你这已经是两种方法了。如果把第一段拿来用.on()来写，那么应该是：

$('.aa').on('click', function() {
    $(this).addClass('bb');
});

才对。第二种方法就是捕捉.bb的早绑定，跟.aa毫无关系。

Answer 3

看到你的问题动手实验了一下,然后去找了下资料,建议可以注意一下三个词语

1. 事件捕获
2. 事件冒泡
3. 事件委托