Discussion :

[Ariranha]

Bonjour,

J'ai un petit soucis avec l'interaction d'un contenu chargé dans une div par js.
Le html :

Code html :

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

1
2
3
4
5
6
7
<div class="grid" id="works">
    <div id="loadContent"></div>
    <figure class="effect-layla"> <img src="" alt=""/>
      <figcaption>
        <a href="#project-jolipre">See more</a> </figcaption>
    </figure>
</div>

Je récupère le contenu en js :

Code :

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

1
2
3
4
5
6
7
$(document).ready(function() {
	var projects = $("#works figure figcaption");
	projects.click( function(){
		var hash = $(this).find("a").attr("href");
		openProject(hash);
	});
});

Jusque là tout va bien. Dans le contenu qui est chargé j'ai l'élément suivant :

Code html :

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

1
2
3
4
5
6
7
<nav>
	<ul>
		<li class="prev"><a href=""><img src="img/project/nav/prev.png" alt="Previous"></a></li>
		<li class="next"><a href=""><img src="img/project/nav/next.png" alt="Next"></a></li>
		<li class="close"><a href="#works"><img src="img/project/nav/close.png" alt="Close"></a></li>
	</ul>
</nav>

Le problème maintenant est pour cibler l'élément li pour y rajouter des interactions.
J'ai essayé plusieurs variantes donc la dernière est la suivante :

Code :

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

1
2
3
4
$("#loadContent > nav .close").live("click", function(){
	alert("btn Close Click");
	closeProject();
});

L'alerte ne s'affiche pas donc j'en déduis que j'ai un mauvais ciblage.
Si quelqu'un pouvait 'aider ?

En vous remerciant par avance !

[danielhagnoul]

$("#loadContent > nav .close").

Je ne vois une classe "close" dans le HTML chargé.

Code :

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

1
2
3
4
$( "#loadContent").on( "click", "img[alt='Close']", function( event ){
    // debug, console, touche F12
    console.log( "event.target", event.target );
});

[Ariranha]

Merci pour cette réponse qui m'a permis d'aller plus loin.
La classe close est attribuée au li :

Code :

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

<li class="close"><a href="#works"><img src="img/project/nav/close.png" alt="Close"></a></li>

J'ai utilisé la même logique que ton bout de code et cela fonctionne :

Code :

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

1
2
3
$("#loadContent").on("click", "li.close", function () {
		closeProject();
	});

Encore merci !