Ajax动态拼接HTML，JS失效的解决——Jquery的事件委托

晚上用Ajax拼接动态生成的html到页面时，遇到JS中的方法失效的问题，可是头疼。
原因是Ajax在载入新的dom之前就已经把页面的JS加载完了，再执行事件时，没有绑定到新载入的dom上。
这时候就需要利用Jquery的事件委托。
利用事件委托的话，只需要给父级绑定一个事件监听，即可让每个li都绑定上相应的事件。
简单来说就是：

$("父元素").on("click","子元素",function(){

//执行代码

})

结合实例：
jsp页面：

<div class="chat_right">
	<ul class="user_list" id="user_list">	      	
		<c:forEach items="${chatFriends}" var="chatFriend">
		<li data-id="${chatFriend.uid}">
			<span class="chat-friend-logo"><img src="/images/
			${chatFriend.ulogo}"></span>
			<div class="chat-friend-text">
				<span class="chat-friend-name">${chatFriend.uname}</span>
				<span class="chat-friend-message">${chatFriend.mcontent}</span>		
			</div>
			<span class="chat-unread-count"><span class="cue-circle">
			${chatFriend.count}</span></span>
		</li>			
		</c:forEach>
	</ul>
</div>

之前的JS：

$(".user_list li").dblclick(function(){
		var image = $(this).find("img").attr("src");
		var name = $(this).find(".chat-friend-name").text();
		var receiverId = $(this).attr("data-id");
		$(this).find('.cue-circle').hide();
		alertChatBody(image,name,receiverId);
});

双击页面中的每一个li是能够执行JS函数的。
现在需要再拼接一个li，利用ajax动态拼接：

function setChatList(msender,mcontent,count){
	$.ajax({
		url:'selectUserById.action',type:'post',data:{msender : msender},dataType:'json',success:function(data){
			var fulogo = data.ulogo;
			var funame = data.uname;
			var str = '<li data-id="' + msender + '">'
					+ '<span class="chat-friend-logo">'
					+ '<img src="/images/' + fulogo + '"></span>'
					+ '<div class="chat-friend-text">'
					+ '<span class="chat-friend-name">'
					+ funame + '</span>'
					+ '<span class="chat-friend-message">'
					+ mcontent
					+ '</span></div><span class="chat-unread-count"><span class="cue-circle">'
					+ count + '</span></span></li>';
			$(".user_list").append(str); 
		}
	});
}

拼接完成后，页面确实多了一个li,但是当我再双击新添的li时，js代码不执行。
利用Jquery的事件委托解决：

$(".user_list").on('dblclick','li',function(){
	var image = $(this).find("img").attr("src");
	var name = $(this).find(".chat-friend-name").text();
	var receiverId = $(this).attr("data-id");
	$(this).find('.cue-circle').hide();
	alertChatBody(image,receiverId);
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!