functions js non dispo apres contenu chargé en ajax

driven78
Javascript

Salut à tous

A certains endroits du site, j'au une navigation par ajax, les fonctions js qui servent a interagir avec l'utilisateur fonctionnent tres bien, sauf si je charge un nouveau contenu par ajax auquel cas, je dois les redeclarer dans l'include que je fais avec l'ajax
Ca fonctionne, mais vous en conviendrez c'esta pas la soluc

J'ai bien penser a la fonction on, mais celle ci ne marche pas a chaque fois

un exemple: en cas d'image manquante sur le site, je decide de la remplacer par une de remplacement

function handleError() {
        this.src = ResolveUrl('img/design/empty_photo.jpg');
}
$('img.f43').on("error", handleError);

Cela marche en temps normal, mais pas si je change le dom

2 réponses

Webyzer

Et comme ça :
$('img').on("error", ".f43", handleError);
Ou
$('#élément_parent#').on("error", "img.f43", handleError);

antho07

Bonsoir,

Cela provient du fait que quand tu fais 

$('truc').on('event',function(){..}); //(1)

tu places en réalité des listeners sur tous les éléments répondant au selecteur truc présent dans le dom au moment ou cette ligne de script js est exécutée.

Ainsi, si par la suite tu modifies le DOM, les modifications du DOM n'auront pas les évènements attachés, ce qui est normal puisque la ligne de script js n'a pas été rejouée et donc jquery n'a pas parcouru ces nouveaux éléments pour y placer les listeners.

La solution consiste en effet à non pas attacher les listeners directement aux élements que tu souhaites ciblés mais à les attacher à un conteneur parent présent dans le DOM au départ. :

$('conteneurParent').on('event','truc',function(){...});  // (2)

Pour comprendre :
(1) veut dire : Ecoute tous les évènements event sur les 'trucs' présent dans la page.

(2) veut dire : Ecoute tous les évènements event sur 'conteneurParent' qui sont propagés par des éléments 'trucs'.

Cela fonctionne parce ce que l'event qui arrive sur un élément dans le DOM va pouvoir être écouté sur l'élement lui-même mais également sur tous les élements parents. L'event va en effet se propager en remontant dans les noeuds du DOM (sauf si on a volontairement stoppé sa propagation)

J'espère avoir été clair, ne pas hésitez à relancer si besoin.

cordialement

Antho