javascript - 关于动态加载后再绑定事件，事件不起作用的提问

问题描述

我在ajax动态创建了三个p盒子之后，再给盒子绑定点击事件为什么不起作用？只有在ajax创建的时候 同时给他 绑定事件才有用？这样就绑定了三遍，这是为什么呢？有没有更优的办法？

问题解答

比如你可以看看jquery实现

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

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

$('#a').live();//过时回答2：

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

这个我以前碰过，动态加载的DOM用onclick是不起作用的，因为只对存在的dom起作用，用$(document).on(’click’,’#a’,function(){})才行，你可以试试看。

你可以用事件委托来实现，就比如说

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

你想在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方法都可以，原生的话用事件委托