javascript - Soalan tentang acara tidak berfungsi selepas pemuatan dinamik dan kemudian mengikat acara

Question

Selepas saya mencipta tiga kotak p secara dinamik dengan ajax, mengapa ia tidak berfungsi apabila saya mengikat acara klik pada kotak? Adakah ia hanya berguna untuk mengikat peristiwa kepadanya apabila ajax dibuat? Ini mengikatnya tiga kali Mengapa ini? Adakah terdapat cara yang lebih baik?

Answer 1

Sebagai contoh, anda boleh melihat pelaksanaan jquery

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

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

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

Answer 2

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

Answer 3

Saya pernah mengalami perkara ini sebelum ini Menggunakan onclick pada DOM yang dimuatkan secara dinamik tidak berfungsi kerana ia hanya berfungsi pada DOM sedia ada Use $(document).on('click','#a',function(){} ) akan berfungsi , anda boleh mencubanya.

Answer 4

Anda boleh menggunakan delegasi acara untuk mencapai ini, contohnya

<p class="wrapper">

</p>

Jika anda ingin menambah senarai (.list) dalam pembungkus, anda boleh menulis perwakilan seperti ini (tulisan mudah):

//获取目标节点(这里只支持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

Anda boleh menggunakan kaedah JQ dan kaedah perwakilan Jika ia asli, gunakan perwakilan acara