Jquery对动态生成的Dom元素设置绑定事件

一、使用live()

live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。请使用 on() 方法代替。

<script type="text/javascript">
$(function(){
    $.post("show",function(data){
        var result = "";
        for(var i=0; i<data.length; i++){
             result += "<dl>";
             result += "<dt>"+data[i].name+"</dt>";
             for(var j=0; j<data[i].children.length; j++){
                 result += "<dd>"+data[i].children[j].name+"</dd>";
             }
             result += "</dl>";
        }
        $("#menulist").html(result);
    });
    
    // 动态绑定事件
	$("dt").on("click", function(){
		alert("hello");
	});
});

二、使用on()

这里需要注意，这种方法每次执行点击事件的时候，它会先找到你所设置的父级对象例如：body、document。然后去检测有没有子对象。如果有的话，他就将事件给到子对象，子对象得到该事件之后就开始触发事件后面的方法。

<script type="text/javascript">
$(function(){
    $.post("show",function(data){
        var result = "";
        for(var i=0; i<data.length; i++){
             result += "<dl>";
             result += "<dt>"+data[i].name+"</dt>";
             for(var j=0; j<data[i].children.length; j++){
                 result += "<dd>"+data[i].children[j].name+"</dd>";
             }
             result += "</dl>";
        }
        $("#menulist").html(result);
    });
    
    // 动态绑定事件
	$("body").on("click", "dt", function(){
		alert("hello");
	});