晚上用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); });