.load en Jquery

**regweb** · 14/12/2014, 21h54

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 :

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

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>

**SpaceFrog** · 15/12/2014, 09h52

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()

**danielhagnoul** · 15/12/2014, 13h38

jQuery

Différences entre on() avec 1 ou 2 sélecteurs

Code :

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

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">
 */

**regweb** · 15/12/2014, 19h37

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

.load en Jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager