動態(tài)生成的DOM不會觸發(fā)onclick事件的原因及解決方法
最近朋友在做一個項目的時候,遇到動態(tài)加載微博內(nèi)容,然后點擊“展開評論”后獲取該微博的所有評論。這里使用了動態(tài)加載的<span mid='123456789′ class='get_comment'>點擊加載評論</span>。
然后再寫
$(“.get_comment).click(function(){
//響應事件邏輯
})
發(fā)現(xiàn)click事件并不會觸發(fā),使用控制臺偵聽也木有錯誤。百思不得其解時,
因為我在以前做搜狐家居商城的運費管理時,也曾遇到,因此將焦點落在動態(tài)加載上。
記得當時本人用的是行內(nèi)事件,在動態(tài)加載時用的是行內(nèi)事件。如 var oBtn = '<a onclick="Freight.delete_curr_citys();" href="javascript:void(0);">刪除</a>'; 其實Freight為對象.delete_curr_citys為此對象的一個方法。
當然也可以使用jquery的live()函數(shù),重寫響應邏輯:
$(“.get_comment”).live(‘click', function() {
var mid = $(this).attr(“mid”);
alert(mid);
});
這時候,jquery可以響應span 的click事件了。這里用到live函數(shù)委派事件,主要用于動態(tài)生成的HTML的事件響應。關于live()函數(shù)的作用,它最直觀的好處在于可以一直 “監(jiān)聽”客戶端瀏覽器操作,對于新增的DOM節(jié)點也會有效,而不需要重新綁定。也許是因為這個“監(jiān)聽”可能會不斷的去綁定、判斷,會造成web應用性能問題,大家可以根據(jù)項目的復雜性選擇性使用。關于live函數(shù),這里有非常詳細的闡述:
定義和用法
live() 方法為被選元素附加一個或多個事件處理程序,并規(guī)定當這些事件發(fā)生時運行的函數(shù)。
通過 live() 方法附加的事件處理程序適用于匹配選擇器的當前及未來的元素(比如由腳本創(chuàng)建的新元素)。
語法
$(selector).live(event,data,function)
參數(shù) 描述
event 必需。規(guī)定附加到元素的一個或多個事件。
由空格分隔多個事件。必須是有效的事件。
data 可選。規(guī)定傳遞到該函數(shù)的額外數(shù)據(jù)。
function 必需。規(guī)定當事件發(fā)生時運行的函數(shù)。
以上這篇動態(tài)生成的DOM不會觸發(fā)onclick事件的原因及解決方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
jquery精度計算代碼 jquery指定精確小數(shù)位
這篇文章主要為大家詳細介紹了jquery精度計算代碼,jquery指定精確小數(shù)位,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02
談談Jquery ajax中success和complete有哪些不同點
jquery ajax中success和complete有哪些不同點呢?大家都了解嗎,接下來通過本篇文章給大家介紹jquery ajax中success和complete的不同點,感興趣的朋友一起學習吧2015-11-11
利用jQuery實現(xiàn)滑動開關按鈕效果(附demo源碼下載)
這篇文章主要介紹了利用jQuery實現(xiàn)滑動開關按鈕效果,文中給出了詳細的介紹,并在文末給出了完整的demo源碼下載,有需要的朋友可以參考簡介,下面來一起看看吧。2017-02-02
jquery ajax局部加載方法詳解(實現(xiàn)代碼)
下面想就為大家?guī)硪黄猨query ajax局部加載方法詳解(實現(xiàn)代碼)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-05-05

