.load en Jquery

Version imprimable

.load en Jquery

bonjour à tous,
dans le code ci-dessous, j'associe un alert() au clic sur une photo. Si j'utilise .load pour charger une photo dans un Div, cette photo ne réagit pasz au clic. merci d'avance pour votre aide.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE html>
<head></head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{   $("img").click(function() 
				{	alert("essai"); });	
 
	$("button").click(function() {		
		$("#contenu").load('test.html'); });		
});
</script>
<img src="logo.jpg">
<button> charger contenu </button>
<div id="contenu" ></div>
</body> </html>
 
/*  contenu du fichier test.html  */
<img src="logo.jpg"></img>

15/12/2014, 09h52
SpaceFrog

un classique ...

dans ton ready tu attribues des évènement a des objets existant sur la page, les éléments ajouté après n'héritent pas automatiquement de ces évènements, il faut utiliser une syntaxe spécifique du on() (avec deux paramètres à partir du parent de l'élément visé ) par délégation ou passer par delegate()

:faq: jQuery :fleche: Différences entre on() avec 1 ou 2 sélecteurs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Trois possibilités :
 
// gestionnaire d'événement pour les images,
// actuelles et futures, contenues dans la page web.
$( "body" ).on( "click", "img", function( event ){
    // debug, console, touche F12
    console.log( "1 : ", event.target );
});
 
// gestionnaire d'événement pour les images,
// actuelles et futures, contenues dans "#contenu".
$( "#contenu" ).on( "click", "img", function( event ){
    // debug, console, touche F12
    console.log( "2 : ", event.target );    
});
 
$( "#contenu" ).load( "test.html", function(){
    // gestionnaire d'événement pour les images,
    // actuelles, contenues dans this ("#contenu").
    $( "img", this ).on( "click", function( event ){
        // debug, console, touche F12
        console.log( "3 : ", event.target );
    });
});
 
/*
 * Résultat dans la console :
 * 3 :  <img src="../images/avatarDVJH.jpg">
 * 2 :  <img src="../images/avatarDVJH.jpg">
 * 1 :  <img src="../images/avatarDVJH.jpg">
 */

15/12/2014, 19h37
regweb

Génial

Vous êtes trop fort, j'ai testé et ca marche! merci les gars.