Discussion :

[bourbour]

Bonjour à tous.

J'ai un souci de propagation avec un répertoire .on(). Grosso modo, dans mon cas suivant je ne récupère qu'une partie des div.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="right">
    <div id="insideright">
        <div class="bloc-0">
            <div id="num-0">
                 <img src="image.jpg" title="titre" />
            </div>
        </div>
    </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('div').on("click", function(event){
        console.log($(this));
	});

J'essaie de récupérer la balise titre de l'image, mais pour simplifier ici je cherche juste à voir ce qu'il me trouve au click. Et la console me renvoie qu'il a trouvé uniquement #right et #insideright.
Les divs .bloc-0 et #num-0 et sont créés au chargement de la page après un loop dans un xml, mais le click se passe bien après. Pourquoi n'ai je pas de propagation jusqu'au dernier enfant? J'ai bien compris qu'on pouvait stopper la propagation mais quid de l'approfondissement?

Merci d'avance

[Darkaurora]

Il s'agit d'un grand principe en JS et en gestion d’événement. On ne le répétera jamais assez je pense mais si l'événement est déclaré avant la création des éléments qui en sont cible il ne se passe... rien

Deux solutions pour palier ce problème soit on déclare toujours les événements après la création des éléments qui doivent être ciblé, soit on utilise la délégation d'événement simplissime avec jQuery:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(document).on("click", 'div', function(event){
        console.log($(this));
});

On attache l'événement sur le document et non sur l'élément qui en est cible et on fournis un filtre des éléments descendants qui vont activer l'événement.

[bourbour]

Merci ton aide et ses précisions me sont très utiles. Je vais tester ça dans la matinée et appronfondir pour en arriver là où je veux.

[bourbour]

"The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready."
http://api.jquery.com/on/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(document).on({
	mouseenter: function(){
		$(this).find('truc').stop().animate({ 'bottom' : -100 }, 150)
	},
	mouseleave: function(){
		$(this).find('truc').stop().animate({ 'bottom' : 0 }, 150)
	}
}, "div[id*='mondiv']");

Et qui marche très bien, puisque le DOM a été peuplé et donc le javascript voit les élèments.

Merci beaucoup