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

前端之家收集整理的这篇文章主要介绍了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);
});
原文链接:https://www.f2er.com/ajax/160696.html

猜你在找的Ajax相关文章