動(dòng)態(tài)生成的DOM不會(huì)觸發(fā)onclick事件的原因及解決方法
最近朋友在做一個(gè)項(xiàng)目的時(shí)候,遇到動(dòng)態(tài)加載微博內(nèi)容,然后點(diǎn)擊“展開評(píng)論”后獲取該微博的所有評(píng)論。這里使用了動(dòng)態(tài)加載的<span mid='123456789′ class='get_comment'>點(diǎn)擊加載評(píng)論</span>。
然后再寫
$(“.get_comment).click(function(){ //響應(yīng)事件邏輯 })
發(fā)現(xiàn)click事件并不會(huì)觸發(fā),使用控制臺(tái)偵聽也木有錯(cuò)誤。百思不得其解時(shí),
因?yàn)槲以谝郧白鏊押揖由坛堑倪\(yùn)費(fèi)管理時(shí),也曾遇到,因此將焦點(diǎn)落在動(dòng)態(tài)加載上。
記得當(dāng)時(shí)本人用的是行內(nèi)事件,在動(dòng)態(tài)加載時(shí)用的是行內(nèi)事件。如 var oBtn = '<a onclick="Freight.delete_curr_citys();" href="javascript:void(0);">刪除</a>'; 其實(shí)Freight為對(duì)象.delete_curr_citys為此對(duì)象的一個(gè)方法。
當(dāng)然也可以使用jquery的live()函數(shù),重寫響應(yīng)邏輯:
$(“.get_comment”).live(‘click', function() { var mid = $(this).attr(“mid”); alert(mid); });
這時(shí)候,jquery可以響應(yīng)span 的click事件了。這里用到live函數(shù)委派事件,主要用于動(dòng)態(tài)生成的HTML的事件響應(yīng)。關(guān)于live()函數(shù)的作用,它最直觀的好處在于可以一直 “監(jiān)聽”客戶端瀏覽器操作,對(duì)于新增的DOM節(jié)點(diǎn)也會(huì)有效,而不需要重新綁定。也許是因?yàn)檫@個(gè)“監(jiān)聽”可能會(huì)不斷的去綁定、判斷,會(huì)造成web應(yīng)用性能問題,大家可以根據(jù)項(xiàng)目的復(fù)雜性選擇性使用。關(guān)于live函數(shù),這里有非常詳細(xì)的闡述:
定義和用法
live() 方法為被選元素附加一個(gè)或多個(gè)事件處理程序,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
通過 live() 方法附加的事件處理程序適用于匹配選擇器的當(dāng)前及未來的元素(比如由腳本創(chuàng)建的新元素)。
語法
$(selector).live(event,data,function)
參數(shù) 描述
event 必需。規(guī)定附加到元素的一個(gè)或多個(gè)事件。
由空格分隔多個(gè)事件。必須是有效的事件。
data 可選。規(guī)定傳遞到該函數(shù)的額外數(shù)據(jù)。
function 必需。規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。
以上這篇?jiǎng)討B(tài)生成的DOM不會(huì)觸發(fā)onclick事件的原因及解決方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript如何實(shí)現(xiàn)ajax調(diào)用后臺(tái)定義的方法
由于ajax的獨(dú)特優(yōu)勢(shì),使得它在當(dāng)前大量網(wǎng)站得到了廣泛的應(yīng)用,下面就介紹一下ajax如何調(diào)用后臺(tái)定義的函數(shù),對(duì)ajax調(diào)用后臺(tái)方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12jquery分頁插件jquery.pagination.js使用方法解析
這篇文章主要針對(duì)js分頁插件jquery.pagination.js使用方法進(jìn)行解析,很實(shí)用的分頁插件,感興趣的小伙伴們可以參考一下2016-04-04使用jquery局部刷新(jquery.load)從數(shù)據(jù)庫取出數(shù)據(jù)
jquery提供了很好的ajax交互,我這里用的是直接返回字符串,用的是jquery.load方法從數(shù)據(jù)庫取出的數(shù)據(jù)2014-01-01ASP.NET MVC中EasyUI的datagrid跨域調(diào)用實(shí)現(xiàn)代碼
因?yàn)閑asyUI使用的是JQuery的異步方法加載數(shù)據(jù),應(yīng)該遵循JQuery的跨域訪問規(guī)則2012-03-03jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法,涉及針對(duì)鼠標(biāo)事件的相應(yīng)及頁面元素屬性動(dòng)態(tài)變換的相關(guān)操作技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-11-11jQuery根據(jù)ID獲取input、checkbox、radio、select的示例
獲取input、checkbox、radio、select的方法有很多,下面本例為大家介紹下根據(jù)ID來獲取2014-08-08jQuery實(shí)現(xiàn)html可聯(lián)動(dòng)的百分比進(jìn)度條
這篇文章主要介紹了jQuery實(shí)現(xiàn)html可聯(lián)動(dòng)的百分比進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03