ajax动态拼接html数据,Ajax动态拼接HTML，JS失效的解决——Jquery的事件委托

晚上用Ajax拼接动态生成的html到页面时，遇到JS中的方法失效的问题，可是头疼。

原因是Ajax在载入新的dom之前就已经把页面的JS加载完了，再执行事件时，没有绑定到新载入的dom上。

这时候就需要利用Jquery的事件委托。

利用事件委托的话，只需要给父级绑定一个事件监听，即可让每个li都绑定上相应的事件。

简单来说就是：

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

//执行代码

})

结合实例：

jsp页面：

• 

  ${chatFriend.uname}

  ${chatFriend.mcontent}

  ${chatFriend.count}

之前的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 = '

'

+ ''

+ ''

+ '

'

+ ''

+ funame + ''

+ ''

+ mcontent

+ '

'

+ count + '

';

$(".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, name, receiverId);

});