問題描述

我在ajax動(dòng)態(tài)創(chuàng)建了三個(gè)p盒子之后，再給盒子綁定點(diǎn)擊事件為什么不起作用？只有在ajax創(chuàng)建的時(shí)候 同時(shí)給他 綁定事件才有用？這樣就綁定了三遍，這是為什么呢？有沒有更優(yōu)的辦法？

問題解答

比如你可以看看jquery實(shí)現(xiàn)

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

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

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

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

這個(gè)我以前碰過(guò)，動(dòng)態(tài)加載的DOM用onclick是不起作用的，因?yàn)橹粚?duì)存在的dom起作用，用$(document).on(’click’,’#a’,function(){})才行，你可以試試看。

你可以用事件委托來(lái)實(shí)現(xiàn)，就比如說(shuō)

<p class='wrapper'></p>

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

//獲取目標(biāo)節(jié)點(diǎn)(這里只支持class獲取)//ele: 起始元素，最內(nèi)側(cè)的元素//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;//當(dāng)滿足觸發(fā)條件時(shí)if(getTargetNode(target,selector,ele)){ //The deep♂dark♂fantasy} };}addEvent('click',document.querySelecor(’.wrapper’),’.list’);回答5：

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