Fonction load désactive les appels des scripts dans 'document.ready'

**facilus68** · 12/08/2013, 12h15

Bonjour,

Je voudrais recharger un div avec la methode load de cette maniere :

Code :

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

1
2
3
4
5
6
7
8
 
<div id="content">
<ul id="load">
        <li><a href="#" id="chapitre1" data-ajax="chapitre1">Chap1</a></li>
	<li><a href="#" id="chapitre2" data-ajax="chapitre2">Chap2</a></li>
	<li><a href="#" id="chapitre3" data-ajax="chapitre3">Chap3</a></li>
</ul>
</div>

J'utilise jquery de cette maniere générique :

Code :

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

1
2
3
4
 
$( '#load' ).on( 'click', 'a', function( ) {
  $('#content').load('Chapitres/'+$( this ).data( 'ajax' )+'.html #content' );
});

Le div est bien charger avec la page html correspondante au chapitre.

Apres j'esseye de charger le div de nouveau avec les titre du chapitres, et là , aucun appel jquery ne se passe !!!!!!!

Code :

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

1
2
3
4
 
$( '#titreChap1' ).on( 'click', 'a', function( ) {
  $('#content').load('Chapitres/chapitre1/'+$( this ).data( 'ajax' )+'.html #content' );
});

la page html d'une liste de titre pour le chapitre 1 par exemple est :

Code :

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

1
2
3
4
5
 
<ul id="titreChap1">
     <li><a href="#" id="titre1" data-ajax="titre1">Titre 1</a> </li>
     <li><a href="#" id="titre2" data-ajax="titre2">Titre 2</a></li>
 </ul>

Les scripts sont tous dans un "document.ready".

Pourquoi apres l'appel d'un second load, rien n'est activé ?

Merci

**danielhagnoul** · 12/08/2013, 12h28

Bonjour

Code dynamique ('#titreChap1' n'existe pas au chargement de la page), donc adaptation du code de la méthode on() : $( '#content' ).on( 'click', '#titreChap1 a', function( ) { ... });.

Voir l'API : http://api.jquery.com/on/

**facilus68** · 12/08/2013, 12h45

Merci daniel,

J'ai changé le script comme cela :

Code :

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

1
2
3
4
 
$( '#content' ).on( 'click', '#titreChap1 a', function( ) {
	$('#content').load('Chapitres/chapitre1/'+$( this ).data( 'ajax' )+'.html  #content' );
});

mais j'ai toujours le même souci, le div n'est pas chargé.

J'ai vu la console, rien n'est affiché.

**danielhagnoul** · 12/08/2013, 12h58

Je suggère de tester :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$( '#load a' ).on( 'click', function( ){
 
	$( '#content' ).load( 'Chapitres/' + $( this ).data( 'ajax' ) + '.html #content', function(){
 
		// ici le chargement du chapitre 1 est terminé
 
		$( '#content' ).on( 'click', '#titreChap1 a', function( ) {
			$( '#content' ).load( 'Chapitres/chapitre1/' + $( this ).data( 'ajax' ) + '.html #content' );
		});
 
	});
 
});

**facilus68** · 12/08/2013, 13h17

J'ai toujours le même souci, daniel.

**danielhagnoul** · 12/08/2013, 15h51

Pour un gestionnaire d'événement, ma dernière suggestion n'est normalement pas nécessaire, et le fait qu'elle ne fonctionne pas me fait penser qu'il y a d'autres soucis ailleurs.

Il faudrait disposer de la totalité du code pour pouvoir tester. Mais là je dois m'absenter, je serais de retour ce soir.

**facilus68** · 12/08/2013, 23h11

Dois-je mettre le contenu de tous les fichiers ?

**danielhagnoul** · 13/08/2013, 02h14

Exemple, voir les codes JS et HTML :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://danielhagnoul.developpez.com/lib/VerbalExpressions.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js", function(){
 
$( function(){
 
	/*
	 * On gère l'évènement "click" sur tous les tags "a" contenu dans
	 * tous les éléments ayant un ID commençant par "chap", cet élément étant un
	 * élément enfant de l'élément d'ID "content"
	 */
	$( "#content" ).on( "click", "[id^='chap'] a", function( event ){
 
		// récupération de l'ID de la division parent
		// on supprime les 4 premiers caractères "chap"
		var str = $( event.target ).parents( "div" ).attr( "id" ).slice( 4 );
 
		// debug console, touche F12
		console.log( event.target, str );
 
		// $( "#content" ).load( "Chapitres/chapitre" + str + "/" + $( this ).data( "ajax" ) + ".html  #content" );
 
		return false;
    });
 
});
 
		});
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<div id="content">
	<div id="chap1">
		<a href="" data-ajax="titre1">Lien 1-1</a>
		<a href="" data-ajax="titre2">Lien 1-2</a>
	</div>
	<div id="chap2">
		<a href="" data-ajax="titre1">Lien 2-1</a>
		<a href="" data-ajax="titre2">Lien 2-2</a>
	</div>
	<div id="chap3">
		<a href="" data-ajax="titre1">Lien 3-1</a>
		<a href="" data-ajax="titre2">Lien 3-2</a>
	</div>
</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-08-06T22:00:31.100+02:00" pubdate>2013-08-06T22:00:31.100+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**facilus68** · 13/08/2013, 11h49

Merci Daniel, ca fonctionne tres bien

Fonction load désactive les appels des scripts dans 'document.ready'

jQuery

Discussions similaires

Partager

Partager