jquery 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);

});