javascript - Question sur l'événement qui ne fonctionne pas après un chargement dynamique puis une liaison de l'événement

Question

Après avoir créé dynamiquement trois boîtes p avec ajax, pourquoi cela n'a-t-il pas fonctionné lorsque j'ai lié des événements de clic aux boîtes ? Est-il utile de lui lier des événements uniquement lors de la création d'ajax ? Cela le lie trois fois. Pourquoi est-ce ? Existe-t-il une meilleure façon ?

Answer 1

Par exemple, vous pouvez jeter un œil à l'implémentation de jquery

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

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

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

Answer 2

$(document).on('click','#a',function(){ //TODO }); En empruntant la réponse au premier étage, je pense que vous pouvez d'abord trouver son élément parent, puis le lier

Answer 3

J'ai déjà rencontré ce problème. Utiliser onclick sur un DOM chargé dynamiquement ne fonctionne pas car cela ne fonctionne que sur le DOM existant. Utiliser $(document).on('click','#a',function(){} ) fonctionnera. , vous pouvez l'essayer.

Answer 4

Vous pouvez utiliser la délégation d'événements pour y parvenir, par exemple

<p class="wrapper">

</p>

Si vous souhaitez ajouter une liste (.list) dans le wrapper, vous pouvez écrire le délégué comme ceci (écriture simple) :

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

Vous pouvez utiliser la méthode on et la méthode déléguée de JQ. Si elle est native, utilisez la délégation d'événement

.