Discussion :

[EthanPlg]

Bonjour,

Cela fait plusieurs fois que je tombe sur ce problème et j'aimerais trouver ne serait-ce qu'une explication.

Le contexte : Sur une page que j'aimerais gérer sans rechargement, j'utilise une fonction JS qui utilise jquerry pour rajouter un SELECT avec ses lignes OPTION qui sont issus d'une base de donnée. Jusque la tout marche bien. Maintenant dans ces éléments OPTION, j'ai un attribut onclick qui est censé appeler une fonction. Seulement dans les fait cette fonction n'est jamais lancée. Quand j'utilise l'examinateur de code, déjà, le onclick n'apparait pas. En regardant avec firebug, l'attribut apparait mais ne semble pas fonctionner.

J'ai lu quelque part que l'ajout de déclencheur en "texte" ne fonctionne pas si celui ci n'était pas présent sur la page au moment de sa génération (donc dans mon cas, puisqu'il est ajouté par du jquerry, c'est en effet la situation dans laquelle je suis.

Seulement je trouve cela très embettant, je n'ai pas réussi a trouvé de solution sur le net, ni même auprès de mes professeurs. Quelqu'un d'autre a t-il déjà eu a faire avec ce problème ?

Merci !

EDIT :

Voici le code si cela vous aide davantage, c'est donc la fonction hideothername et showothername qui ne sont pas prise en compte après modification :
mon script js :

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
function hideothername(nature) {
	var nom_bloc_id = "othernamelot";
	if(nature == '1')
		$(nom_bloc_id).removeClass().addClass("hidden");
	else {
		nom_bloc_id += String(nature);
		$(nom_bloc_id).removeClass().addClass("hidden");
	}
	console.log("lol");
}
function addothername(nature) {
	var nom_bloc_id = "othernamelot";
	if(nature == '1')
		$(nom_bloc_id).removeClass().addClass("inline");
	else {
		nom_bloc_id += String(nature);
		$(nom_bloc_id).removeClass().addClass("inline");
	}
	console.log("lol");
}
function aff_menu(nomtype){
	if(nomtype == "lot"){
		$.post("affichermenu.php", { nomtype: "lot" }, function(data){
			$("#typenature").empty().append( data );
		});
	}
	if(nomtype == "bon"){
		$.post("affichermenu.php", { nomtype: "bon" }, function(data){
			$("#typenatur2").empty().append( data );
		});
	}
	if(nomtype == "complement"){
		$.post("affichermenu.php", { nomtype: "complement" }, function(data){
			$("#typenatur3").empty().append( data );
		});
	}
	if(nomtype == "info"){
		$.post("affichermenu.php", { nomtype: "info" }, function(data){
			$("#typenatur4").empty().append( data );
		});
	}
}

affichermenu.php

Code php :

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
<?php
$nomtype1 = $_POST['nomtype'];
$bdd = mysqli_connect();
$nomtype = mysqli_real_escape_string($bdd, $nomtype1);
$database = "nom".$nomtype."s";
$datafield = "nom".$nomtype;
$req = mysqli_query($bdd, "SELECT * FROM $database ORDER BY $datafield");
$rep = "";
if($nomtype == "lot"){
	while($don = mysqli_fetch_array($req)) {
		$rep.="<OPTION onclick=\"hideothername('1');return false;\">".$don["$datafield"]."</OPTION>";
	}
	$rep.="<OPTION onclick=\"addothername('1');return false;\">Autre nom</OPTION>";
}
if($nomtype == "bon"){
	while($don = mysqli_fetch_array($req)) {
		$rep.="<OPTION onclick=\"hideothername('2');return false;\">".$don["$datafield"]."</OPTION>";
	}
	$rep.="<OPTION onclick=\"addothername('2');return false;\">Autre nom</OPTION>";
}
if($nomtype == "complement"){
	while($don = mysqli_fetch_array($req)) {
		$rep.="<OPTION onclick=\"hideothername('4');return false;\">".$don["$datafield"]."</OPTION>";
	}
	$rep.="<OPTION onclick=\"addothername('4');return false;\">Autre nom</OPTION>";
}
if($nomtype == "info"){
	while($don = mysqli_fetch_array($req)) {
		$rep.="<OPTION onclick=\"hideothername('3');return false;\">".$don["$datafield"]."</OPTION>";
	}
	$rep.="<OPTION onclick=\"addothername('3');return false;\">Autre nom</OPTION>";
}
mysqli_close($bdd);
echo $rep;
?>

[ryan]

Yop!


Si on simplifie la situation pour tester un peu le truc, on a besoin de quoi?
Une fonction test(), un peu de Jquery pour créer un select avec ses options qui ont un onclick qui appelle la fonction test()

Code html :

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
 
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script> 
        function test(parametre){
                alert(parametre);
        }
                
        $().ready(function(){
 
                $("#mon_bouton").click(function(){
                        $("#ma_div").append("<select><option onclick=\"test('clic sur data1');return false;\">data1</option><option onclick=\"test('clic sur data2');return false;\">data2</option></select>");
                });
        
 
        });
        </script> 
 
</head>
 
<body>
	<div id='ma_div'></div>
	 <button type="button" id='mon_bouton' >Ajouter un select</button> 
 
</body>
</html>

[Bovino]

Il est généralement déconseillé d'utiliser les événements onclick sur les balises option. Il est préférable de gérer l'événement onchange de la balise select.

[EthanPlg]

@ryan : Oui c'est une configuration similaire, au détail prés que la modification (l'ajout des options) n'est pas directement apporter par jquerry, mais fait appel a une deuxième page php par la méthode "post" et ensuite ajoute le contenu de cette deuxième page (deuxième page ou sont donc contenu les options).

@Bovino : Je vais faire les modifications et essayer de gérer ça de cette manière, mais je ne suis pas persuadé que cela résolve le problème.

[danielhagnoul]

Il faut toujours écouter les conseils du sage, même lorsqu'il s’appelle Bovino.

Modifications des options. Code dynamique ! Différences entre on() avec 1 ou 2 sélecteurs

[EthanPlg]

J'ai peut être mal compris alors. C'est d'ailleurs surement ça ^^

Mais j'ai toujours un peu de mal a voir, comment je dois m'y prendre exactement ?
Parce qu'en fonction de l'option je lancerais différentes fonctions. Je dois donc mettre un id sur chaque option pour pouvoir gérer la différenciation ?