javascript - 關於動態載入後再綁定事件，事件不起作用的提問

Question

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

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方法都可以，原生的話用事件委託