Jquery对ajax动态添加进去的元素使用on动态绑定事件

 从jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法。live(),bind()等方法已经被移除。

以下面的多级菜单为例，动态获取并添加菜单列表，然后使用on()绑定一级菜单点击事件实现二级菜单的收放。

注意：

$("静态父元素").on("事件名 多个事件使用空格分隔", "需要点击的子元素" , function(){})

$("静态父元素")：这里必须是可获取的静态元素，否则无法获取到动态元素为其添加点击事件。

$(function() {
		$.post("/menu/show", function(data) {
			var result = "";
			for (var i = 0; i < data.length; i++) {
				result+="<dl>";
				result+="<dt style='cursor:pointer'>"+data[i].name+"</dt>";
				for(var j=0;j<data[i].children.length;j++){
					result+="<dd>"+data[i].children[j].name+"</dd>";
				}
				result+="</dl>";
			}
			
			$("body").html(result);
		});
		
		// 对所有的父菜单添加点击事件
		// $("静态父元素").on("事件名 多个事件使用空格分隔", "需要点击的子元素" , function(){})
		$("body").on("click", "dl dt", function(){
			// slow normal fast 数值
			$(this).siblings().slideToggle(500);
		});
	});