文章詳情頁

javascript - 關于動態加載后再綁定事件，事件不起作用的提問

瀏覽：91日期：2023-02-14 18:42:29

問題描述

我在ajax動態創建了三個p盒子之后，再給盒子綁定點擊事件為什么不起作用？只有在ajax創建的時候同時給他綁定事件才有用？這樣就綁定了三遍，這是為什么呢？有沒有更優的辦法？

問題解答

回答1：

比如你可以看看jquery實現

$('#a').click(callback);

$(document).on(’click’,’#a’,function(){ //TODO });

$('#a').live();//過時回答2：

$(document).on(’click’,’#a’,function(){ //TODO }); 借一樓回答的感覺可以先找到他父元素再綁定

回答3：

這個我以前碰過，動態加載的DOM用onclick是不起作用的，因為只對存在的dom起作用，用$(document).on(’click’,’#a’,function(){})才行，你可以試試看。

回答4：

你可以用事件委托來實現，就比如說

你想在wrapper里面添加一個列表(.list)，委托你可以這樣寫（簡單寫法）:

//獲取目標節點(這里只支持class獲取)//ele: 起始元素，最內側的元素//selector： className,//stopTrget: 委托容器元素function getTargetNode(ele,selector,stopTarget){ var clsReg = new RegExp(selector),className = ele.className; if(ele === stopTarget) return null; if(clsReg.test(className)){return ele; } else {return getTargetNode(ele.parentNode,selector); }};//委托function addEvent(event,ele,selector){ ele['on'+event] = function(e){e = e || event;var target = e.target || e.srcElement;//當滿足觸發條件時if(getTargetNode(target,selector,ele)){ //The deep♂dark♂fantasy} };}addEvent('click',document.querySelecor(’.wrapper’),’.list’);回答5：

用JQ的on方法和delegate方法都可以，原生的話用事件委托