Bug bizarre avec jquery

Version imprimable

Bonsoir à tous,

Je masque une partie d'un texte contenu dans une balise p via jquery et j'ajoute à l'intérieur de cette même balise p à la suite du texte tronqué un contenu dans un span " plus de détail ". Lorsque l'on clique dessus la partie tronqué du texte se ré affiche. Ensuite j'ajoute en plus de la partie tronqué un texte contenu dans un span " retour " qui devrait en toute logique me faire revenir au début de l'opération. Mais là mystère, le texte " retour " se met bien dans le span au bout du texte mais lorsque je clique dessus rien ne se passe...

Je vous montre mon code qui n'est pas bien complexe au passage :

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
 
$(document).ready( function () {
	var tabMasque = new Array();
	var i = 1;
        //Scan dans ma page toutes les balises p qui devront être tronqué
	$(".entry > .masque").each(function() {
                //Je résupère le contenu originale et le stocke dans un tableau déclaré en variable globale pour pouvoir le réutilisé par la suite.
		tabMasque[i] = $("p#"+$(this).attr("id")).html();
                //Je tronque le texte cotenu dans p via substr et j'ajoute mon texte " plus de detail "
		$(this).html($(this).text().substr(0, 60)+" <span class=\"plus_detail\" id=\""+$(this).attr("id")+"\"><+ de détail></span>");
		i++;
	});
        //Lorsque l'on clique sur le texte plus de détail on affiche la totalité du texte contenu au départ dans la balise p concerné.
	$(".plus_detail").click(function() {
                //Je vide le contenu de la variable pour éviter des petits bugs.
		$("p#"+$(this).attr("id")+".masque").html("");
		  //J'ajoute un lien retour pour revenir à l'état précédent, le texte tronqué.
                $("p#"+$(this).attr("id")+".masque").append(tabMasque[$(this).attr("id")]+" <span class=\"back\" id=\""+$(this).attr("id")+"\">< retour></span>");
	});	
        //Lorsque l'on clique sur le texte " retour " on revien à l'état précédent.
	$(".back").click(function() {
		$("p#"+$(this).attr("id")+".masque").html("");
                //Je retronque mon texte
                $("p#"+$(this).attr("id")+".masque").append(tabMasque[$(this).attr("id")].substr(0, 60)+" <span class=\"plus_detail\" id=\""+$(this).attr("id")+"\"><+ de détail></span>");
	});	
});

Je suis vraiment à l'arrêt avec ce bug (ou erreur de ma part). J'espère que quelqu'un pourra me donner un petit coup de pouce !

Si j'ai bien compris :

Code:

Je suis du texte et la suite est caché

Pourquoi ne pas faire simplement
Code:

1 2 3 4 5 6 Je suis du texte [Plus de détail] et la suite est caché [Retour] 
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $(document).ready( function () { var index=0; $('.detail').click(function(){ $(this).css('display','none'); index = $('.detail').index(this); $('.cacher:eq('+index+')').css('display','block'); }); $('.retour').click(function(){ index = $('.retour').index(this); $('.cacher:eq('+index+')').css('display','none'); $('.detail:eq('+index+')').css('display','block'); }); });
A la base le css est du genre :

Code:

.cacher {display:none;}

J'ai fait ca de tête donc il risque d'y avoir peut être un bug mais dans l'esprit c'est moins compliqué.
L'avantage c'est que je ne touche pas au HTML je le cache ou je le montre.

17/04/2009, 18h31
erehcab

Merci de ta réponse. Le problème de ta solution c'est que je suis obligé de partir avec une zone paragraphe (p) de ce type :

Code:

du texte ...

et d'y ajouter ensuite les éléments pour afficher et masquer le texte. L'idée c'est que via tiny mce l'utilisateur est juste à définir une classe à sa zone paragraphe pour générer cet effet.

Pour info je me suis rendu compte qu'en mettant le block de code censé ramener le texte à son premier état (tronqué) à l'intérieur du bloc qui affiche l'intégralité du texte, ça fonctionne 1 fois ...

exemple :

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
 
$(document).ready( function () {
	var tabMasque = new Array();
	var i = 1;
        //Scan dans ma page toutes les balises p qui devront être tronqué
	$(".entry > .masque").each(function() {
                //Je résupère le contenu originale et le stocke dans un tableau déclaré en variable globale pour pouvoir le réutilisé par la suite.
		tabMasque[i] = $("p#"+$(this).attr("id")).html();
                //Je tronque le texte cotenu dans p via substr et j'ajoute mon texte " plus de detail "
		$(this).html($(this).text().substr(0, 60)+" <span class=\"plus_detail\" id=\""+$(this).attr("id")+"\"><+ de détail></span>");
		i++;
	});
        //Lorsque l'on clique sur le texte plus de détail on affiche la totalité du texte contenu au départ dans la balise p concerné.
	$(".plus_detail").click(function() {
                //Je vide le contenu de la variable pour éviter des petits bugs.
		$("p#"+$(this).attr("id")+".masque").html("");
		  //J'ajoute un lien retour pour revenir à l'état précédent, le texte tronqué.
                   $("p#"+$(this).attr("id")+".masque").append(tabMasque[$(this).attr("id")]+" <span class=\"back\" id=\""+$(this).attr("id")+"\">< retour></span>");
        //Lorsque l'on clique sur le texte " retour " on revien à l'état précédent.
	$(".back").click(function() {
		$("p#"+$(this).attr("id")+".masque").html("");
                //Je retronque mon texte
                $("p#"+$(this).attr("id")+".masque").append(tabMasque[$(this).attr("id")].substr(0, 60)+" <span class=\"plus_detail\" id=\""+$(this).attr("id")+"\"><+ de détail></span>");
	});
	});	
 
});

Bonsoir.

Voici un exemple de code :

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
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
91
92
93
94
95
96
97
98
99
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <meta name="Description" content="Expace de travail du webmestre." />
    <meta name="Keywords" content="jquery, javascript, json, html, css, exercices, plugin, documentation" />
    <meta http-equiv="Robots" content="none, noindex, nofollow" />
    <meta name="Robots" content="none, noindex, nofollow" />
    <title>Efface moi !</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
        div#conteneur p {
            margin-bottom:12px;
        }
        div#affiche {
            margin:12px;
            border:1px solid red;
        }
        .plus_detail, .back {
            color:#0000FF;
            text-decoration:underline;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){    
            var tabMasqueArray = [];
            var strPlusDeDetails = " plus de détails.";
            var strRetour = " retour.";
 
            $("p.masque").each(function(i, item) {
                var pHTML = $(item).html();
                var pSliceHTML = pHTML.slice(0, 60);
 
                tabMasqueArray[i] = [pHTML, pSliceHTML];
 
                $(item).empty();
                $(item).html(pSliceHTML + "<span class='plus_detail' numero='" + i + "'>" + strPlusDeDetails + "</span>");
            });
 
            $("span.plus_detail").live("click", function() {
                var i = $(this).attr("numero");
                var para = $(this).parent("p");
 
                $(para).empty();
                $(para).html(tabMasqueArray[i][0] + "<span class='back' numero='" + i + "'>" + strRetour + "</span>");
 
                return false;
            });    
 
            $("span.back").live("click", function(){
                var i = $(this).attr("numero");
                var para = $(this).parent("p");
 
                $(para).empty();
                $(para).html(tabMasqueArray[i][1] + "<span class='plus_detail' numero='" + i + "'>" + strPlusDeDetails + "</span>");
 
                return false;
            });
         });
    </script>
</head>
<body>
    <div id="conteneur" class="entry">
        <p class="masque" id="pID1">
            Paragraphe dont une partie est masquée. Paragraphe dont une partie est masquée. Paragraphe dont une partie est masquée.
        </p>
        <p>Paragraphe normal.</p>
        <p class="masque" id="pID2">
            Paragraphe dont une partie est masquée. Paragraphe dont une partie est masquée. Paragraphe dont une partie est masquée.
        </p>
        <div id="affiche"></div>
    </div>
</body>
</html>

Lorsque l'on veut interagir avec un élément créé par le script il faut utiliser live !

17/04/2009, 22h34
erehcab

live :yaisse2:

Dommage que tu sois en Belgique je t'aurai bien offert une bonne bière pour fêter ça !!!

Merci beaucoup danielhagnoul, tu m'enlèves une grosse épine du pied.

Je commençais à me douter qu'il y avait une histoire comme ça mais je ne trouvais rien dans les docs ...
18/04/2009, 16h29
danielhagnoul

Bonsoir erehcab, je viens de la boire à ta santé, merci !

Prendre quelquefois du temps sur mes loisirs pour vous répondre est un plaisir. Recevoir un mot sympa motive pour aider quelqu'un d'autre.
22/04/2009, 22h28
erehcab

Bonne rencontre au hasard d'un post sur developpez.net :D . Ca donne envie de continuer à nourrir les forums.