[DOM] jquery et DOM

Version imprimable

[DOM] jquery et DOM

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.:D
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 <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>

08/09/2008, 16h39
Sh4dow49

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)
08/09/2008, 16h51
swannus

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.
:?
08/09/2008, 17h00
Sh4dow49

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 ?

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

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

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é.
:?

Bonjour,

essaie avec

Code:

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

A+

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

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
<!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>

08/09/2008, 17h33
swannus

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!!:king:
08/09/2008, 17h38
foudev

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 ;).

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

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
<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..:cry:

08/09/2008, 17h42
swannus

Effectivement le code isolé fonctionne!!!
ça doit venir d'ailleurs j'ai du oublier quelque chose......
08/09/2008, 17h52
swannus

Merci a tous pour vos contributions.

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

:yaisse2:

je vais mi replonger...
Merci encore:lol:
08/09/2008, 17h56
foudev

A mettre résolu à ce cas. STP
08/09/2008, 20h51
Invité

Re,

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

A+
09/09/2008, 10h23
swannus

petit ajout
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.:lol:
Code:

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>