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