[DOM] jquery et DOM

**swannus** · 08/09/2008, 17h26

Bonjour à tous j'ai besoin d'un petit coup de main pour cette page
Je cherche à afficher la fenêtre hello world quand je click sur chaque "<li>".
j'ai un script jquery qui fonctionne avec tous les éléments ,mais je voudrai que ce soit spécifique aux "li"
Voila voila toute aide est la bienvenue.
Merci.

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
 
 
<div id="suggestions" class="suggestionsBox" style="">
 
	<div id="autoSuggestionsList" class="suggestionList">
 
 
		<div id="choix_au">
 
 
 
		<li id="z2"><div>TI0434VOJQT A5ET1O5DXAZ</div></li>
 
		</div>
	</div>
</div>
 
 
 
<script type="text/javascript">
 
   $(document).ready(function () {
 
   $("suggestionList ").click(function () {
     alert("Hello world");
   });
 });    
 
 
</script>

**Sh4dow49** · 08/09/2008, 17h39

Ce n'est pas possible sans jQuery ? Si tu mets l'attribut onclick sur chaque balise <li> et ton alert dans le onclick ça marche pas ?

EDIT : A nan ca marche pas lol (je viens d'essayer)
Par contre tu peux faire le test sur le tag de ta balise avant d'afficher l'alert (ça c'est surement possible)

**swannus** · 08/09/2008, 17h51

En fait je veux séparer le html du JavaScript(Jquery).
La est le problème.
Il ne faut pas qu'il y ai de js directement dans le html.

**Sh4dow49** · 08/09/2008, 18h00

hé bien tu exporte ton script js dans un fichier à part et tu insère ensuite le fichier js dans l'en-tete de ta page comme tu fais pour le fichier jquery.js non ?

**swannus** · 08/09/2008, 18h10

Je me suis mal exprimé.
Il ne faut pas de html dans ce genre"

Code :

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

1
2
 
<a href="javascript:toto()">

"
mais plutot

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
 
   $(document).ready(function () {
 
   $("a").click(function () {
     alert("Hello world");
   });
 });    
 
 
</script>
 
<a href="monlien">monlien</a>

le javascript ne doit pas être mélangé au html mais peux être dans la même page.

mon soucis c'est que je n'arrive pas a specifier que je veux une action sur les "li".

désolé pour le manque de clarté.

Invité · 08/09/2008, 18h11

Bonjour,

essaie avec

Code :

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

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
$(document).ready(function () {
   $("li").click(function () {
     alert("Hello world");
   });
 });
</script>

A+

**foudev** · 08/09/2008, 18h23

vu que tu as attribué un id à ton "li".
tu peux mettre ça

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 
 $(document).ready(function () {
 
   $("#z2").click(function() {
     alert("Hello world");
   });
 });     
 
</script>
</head>
 
<body>
<div id="suggestions" class="suggestionsBox" style="">
 
	<div id="autoSuggestionsList" class="suggestionList">
 
 
		<div id="choix_au">
 
 		<ul>
 
		<li id="z2"><div>TI0434VOJQT A5ET1O5DXAZ</div></li>
		</ul> 
		</div>
	</div>
</div>
 
</body>
</html>

**swannus** · 08/09/2008, 18h33

snif! Déja merci à tous mais il ne se passe rien et je n'ai pas erreur js.

une autre idée?
Quelqu'un connais un bon tuto jquery ?

Vraiment merci les gars pour la vitesse de vos réponses!!

**foudev** · 08/09/2008, 18h38

Non, ça marche j'ai testé ce bout de code sous IE6 , mozilla 3 et opera 9.52 et ça marche sans problème,les deux solutions.A vérifier si t'as fait le bon appel du js de la librairie jquery.Pour la documentation il y a le site http://docs.jquery.com/ qui est très utile

.

**swannus** · 08/09/2008, 18h39

j'ai peux être oublié quelque chose si ça peux aider...

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
91
92
93
94
95
96
97
98
<html>
<head>
</head>
<body>
LISTE DES VARIABLES DE SESSION :
<br/>
Array ( [0] => j [1] => 488 )
<hr/>
<script src="./js/jquery/menu_barre/jquery.js" type="text/javascript">
</script>
<script src="./js/jquery/menu_barre/menu.js" type="text/javascript">
</script>
<script src="./js/jquery-1.2.1.pack.js" type="text/javascript">
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
</script>
<p>4444444444444444444</p>
<div>20</div>
<div id="titre">REFERENTIEL</div>
<div id="main">
<div id="menu">
<div>
<a href="#" title="Rubrique Utilisateur">Utilisateur |</a>
<ul style="display: none;">
</ul>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<div class="nettoyeur"/>
</div>
<div>
<form action="">
<div>
rechercher une AU :
<br/>
<input id="inputString" type="text" onblur="fill();" onkeyup="lookup(this.value);" value="" size="30"/>
</div>
<div id="suggestions" class="suggestionsBox" style="">
<img alt="upArrow" style="position: relative; top: -12px; left: 30px;" src="./images/upArrow.png"/>
<div id="autoSuggestionsList" class="suggestionList">
jfrnombre de resultats : 7
<p>balise P</p>
<div>
<label>
</label>
<br/>
</div>
<div id="choix_au">
<ul>
<div> balise div</div>
<li id="z1">
<div>JFR72AOY937 TYHNB1NWQ06</div>
</li>
<li id="z2">
<div>JFR91KFEFF1 EOP0STYYKDJ</div>
</li>
<li id="z3">
<div>JFRFCRYBLYD QNX2V76BOVU</div>
</li>
<li id="z4">
<div>JFRJUMBJWP4 XZMQOVOAIEQ</div>
</li>
<li id="z5">
<div>JFRKMOGU9CF JMH2EX3ZV2T</div>
</li>
<li id="z6">
<div>JFRW82C09KE RDG4F1ZHVP6</div>
</li>
<li id="z7">
<div>JFRWDAABRR2 G0WDH124U4F</div>
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
<form action="">
</form>
<div>
</div>
<div>
</div>
<dl id="formulaire">
</dl>
<script type="text/javascript">
</script>
</body>
</html>

la ou il y a plein de div ce sont des parties de codes qui ne sont pas utiles ici.
Je désepere..

**swannus** · 08/09/2008, 18h42

Effectivement le code isolé fonctionne!!!
ça doit venir d'ailleurs j'ai du oublier quelque chose......

**swannus** · 08/09/2008, 18h52

Merci a tous pour vos contributions.

Je n'ai pas résolu mon problème mais le code isolé fonctionne.

je vais mi replonger...
Merci encore

**foudev** · 08/09/2008, 18h56

A mettre résolu à ce cas. STP

Invité · 08/09/2008, 21h51

Re,

Il serait bien aussi d'utiliser la dernière version de jQuery !

A+

**swannus** · 09/09/2008, 11h23

Un petit ajout si on recherche tous les "li" avec un "id qui commence par "z"

"li[@id^='z']" ou si ça ne marche pas "li[@id^='z_']" sans doute du à la version de jquery.

Code :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
 
$(document).ready(function () {
   $("li[@id^='z']").click(function() {
     alert("Hello world");
   });
 });     
 
</script>

[DOM] jquery et DOM

jQuery

Discussions similaires

Partager

Partager