DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 動態生成的DOM不會觸發onclick事件的原因及解決方法
動態生成的DOM不會觸發onclick事件的原因及解決方法
編輯:關於JavaScript     

最近朋友在做一個項目的時候,遇到動態加載微博內容,然後點擊“展開評論”後獲取該微博的所有評論。這裡使用了動態加載的<span mid='123456789′ class='get_comment'>點擊加載評論</span>。

然後再寫

$(“.get_comment).click(function(){

//響應事件邏輯

})

發現click事件並不會觸發,使用控制台偵聽也木有錯誤。百思不得其解時,

因為我在以前做搜狐家居商城的運費管理時,也曾遇到,因此將焦點落在動態加載上。

記得當時本人用的是行內事件,在動態加載時用的是行內事件。如 var oBtn = '<a onclick="Freight.delete_curr_citys();" href="javascript:void(0);">刪除</a>'; 其實Freight為對象.delete_curr_citys為此對象的一個方法。

當然也可以使用jquery的live()函數,重寫響應邏輯:

$(“.get_comment”).live(‘click', function() {
var mid = $(this).attr(“mid”);
alert(mid);
});

這時候,jquery可以響應span 的click事件了。這裡用到live函數委派事件,主要用於動態生成的HTML的事件響應。關於live()函數的作用,它最直觀的好處在於可以一直 “監聽”客戶端浏覽器操作,對於新增的DOM節點也會有效,而不需要重新綁定。也許是因為這個“監聽”可能會不斷的去綁定、判斷,會造成web應用性能問題,大家可以根據項目的復雜性選擇性使用。關於live函數,這裡有非常詳細的闡述:

定義和用法

live() 方法為被選元素附加一個或多個事件處理程序,並規定當這些事件發生時運行的函數。

通過 live() 方法附加的事件處理程序適用於匹配選擇器的當前及未來的元素(比如由腳本創建的新元素)。

語法

$(selector).live(event,data,function)

參數 描述

event 必需。規定附加到元素的一個或多個事件。

由空格分隔多個事件。必須是有效的事件。 

data 可選。規定傳遞到該函數的額外數據。

function 必需。規定當事件發生時運行的函數。

以上這篇動態生成的DOM不會觸發onclick事件的原因及解決方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved