jquery点击事件失效原因和解决办法

今天遇到的一个问题：在使用jQuery绑定点击事件的时候，动态添加元素的时候，会遇到点击无效的情况；

例如：给dl里添加dd元素,并给dd绑定点击事件

$("dl").append('<dd value="'+data[i].user_id+'" rel="'+data[i].user_name+'">'+data[i].user_name+'('+data[i].department_name

+')</dd>');

// 示范一

$("dl dd").click(function(){
    alert($(this).attr('value'));
});

// 示范二

$("dl dd").on('click',function(){
    alert($(this).attr('value'));
});

这两种绑定方式，点击后完全没有反应；

解决方法：使用on

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

例如：

$("dl").on('click','dd',function(){
    alert($(this).attr('value'));
});

// 或者

$(document).on('click', 'dd',function(){
    alert($(this).attr('value'));
});

注意：

1. on前面的元素即dl，必须在页面加载的时候就存在于dom里面。
2. $(document)的在同一个页面，不会更新，再次点击的话会出现两次弹窗；