Ext JS sur événement click

Question

J'ai l'événement suivant:

Ext.onReady(function() { 

Ext.select('.gallery-item img').on('click', function(e) { 
    Ext.select('.gallery-item').removeClass('gallery-item-selected'); 
    Ext.get(e.target).parent().addClass('gallery-item-selected'); 
}); 

}); 

Ce qui fonctionne très bien quand la page se charge.

Cependant, je crée dynamiquement des divs supplémentaires de l'élément gallery-item avec une image à l'intérieur. L'événement click cesse de fonctionner une fois que je crée un nouvel élément.

Comment puis-je 'mettre à jour' cette liaison?

Merci.

Answer 1

Ext.select sélectionne tous les éléments et leur ajoute statiquement le gestionnaire de clic à ce moment-là. Pour que les nouveaux éléments aient le même gestionnaire, ils doivent également y être ajoutés après leur création. Cependant, ce n'est pas une approche optimale.

Il serait préférable d'utiliser la délégation d'événements dans ce cas - ajoutez un gestionnaire de clic unique à votre élément conteneur, puis déléguez la gestion en fonction de l'élément sur lequel vous avez cliqué. Ceci est plus efficace (un seul gestionnaire d'événements est requis) et beaucoup plus flexible. Par exemple, si votre élément contenant avait l'id « galerie-ct » ce serait:

Ext.onReady(function() { 
    Ext.get('gallery-ct').on('click', function(e, t){ 
     // t is the event target, i.e. the clicked item. 
     // test to see if it is an item of the type you want to handle 
     // (it is a DOM node so first convert to an Element) 
     t = Ext.get(t); 
     if(t.hasClass('gallery-item'){ 
     // radioClass automatically adds a class to the Element 
     // and removes it from all siblings in one shot 
     t.radioClass('gallery-item-selected'); 
     } 
    }); 
}); 

EDIT: Si vous avez des éléments imbriqués dans votre cible de clic, vous aurez envie de prendre un peu (mais pas beaucoup) approche plus avancée et recherchez votre cible que l'événement de clic éclate de l'élément cliqué (en utilisant EventObject.getTarget). Si votre cible se trouve dans la chaîne d'événements alors qu'elle fait une bulle à partir du fichier el cliqué, vous savez que le clic est toujours valide. Code à jour:

Ext.onReady(function() { 
    Ext.get('gallery-ct').on('click', function(e, t){ 
     // disregard 't' in this case -- it could be a child element. 
     // instead check the event's getTarget method which will 
     // return a reference to any matching element within the range 
     // of bubbling (the second param is the range). the true param 
     // is to return a full Ext.Element instead of a DOM node 
     t = e.getTarget('.gallery-item', 3, true); 
     if(t){ 
     // if t is non-null, you know a matching el was found 
     t.radioClass('gallery-item-selected'); 
     } 
    }); 
});