javascript – Frage, ob das Ereignis nach dem dynamischen Laden und anschließenden Binden des Ereignisses nicht funktioniert

Question

Nachdem ich mit Ajax drei P-Boxen dynamisch erstellt habe, warum funktioniert es dann nicht, wenn ich Klickereignisse an die Boxen binde? Ist es nur sinnvoll, Ereignisse an ihn zu binden, wenn Ajax erstellt wird? Dadurch wird es dreimal gebunden. Gibt es einen besseren Weg?

Answer 1

比如你可以看看jquery实现

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

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

$("#a").live();//过时

Answer 2

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

Answer 3

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

Answer 4

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

<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');

Answer 5

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