Fonctionnement de .click() sous firefox

Jonathan.Harvey · 27/01/2012, 18h32

Bonjour,

J'essaye actuellement de lancer de lancer un clique d'un champ input file et bizarrement, le code fonctionne bien sous IE mais pas sous FF.

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
 
 
<form action="monAction" enctype="multipart/form-data" method="POST" id="formFile">
 
<input type='file' name='file1' id='file1' />
 
</form>
 
 
<button id="addCover">Ajouter le cover</button>
 
 
<script type="text/javascript">
 
	document.getElementById('addCover').onclick = function(){
 
		$('#file1').click();
		//$('#file1').trigger('click');
 
	};
</script>

Autant $('file1').click(); que $('#file1').trigger('click'); fonctionnent sous IE
et pourtant sous FF, rien. Aucun résultat, aucune erreur. Il ne se produit tout simplement rien.

Quelqu'un aurait une idée ?

Merci

malgache · 27/01/2012, 18h41

Salut,

Si tu charge JQuery tu peux faire:

Code :

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

1
2
3
4
 
$("#tonId").click(function(){
   // Code à exécuter
});

Jonathan.Harvey · 27/01/2012, 18h44

Le problème c'est que je crée dynamiquement mes input file.

Il peux donc y avoir de 1 à x, input file.

Je ne peux donc pas prévoir un nombre inconnu de

Code :

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

1
2
3
4
 
$("#tonId").click(function(){
   // Code à exécuter
});

Bovino · 27/01/2012, 18h56

Je viens de tester sur Firefox et

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>file</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<form action="monAction" enctype="multipart/form-data" method="POST" id="formFile">
 
<input type='file' name='file1' id='file1' />
 
</form>
 
 
<button id="addCover">Ajouter le cover</button>
 
 
<script type="text/javascript">
 
	document.getElementById('addCover').onclick = function(){
 
		$('#file1').click();
		//$('#file1').trigger('click');
 
	};
</script>
</body>
</html>

fonctionne très bien...

malgache · 27/01/2012, 18h57

chaque input aura son propres code ?

sinon tu peux essayé en bouclant avec un foreach...

Jonathan.Harvey · 27/01/2012, 19h04

Citation:

Envoyé par malgache

chaque input aura son propres code ?

sinon tu peux essayé en bouclant avec un foreach...

Donc je fais 200-400 fois la même fonction, au cas ou ? ....

foreach ?

@Bovino : Je viens pourtant de le tester à nouveau avec votre code et sa ne fonctionne pas plus.

Mais sa fonctionne avec IE !

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
 
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>file</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
	<form action="monAction" enctype="multipart/form-data" method="POST" id="formFile">
 
 
<input type='file' name='file1' id='file1' />
 
</form>
 
 
<button id="addCover">Ajouter le cover</button>
 
 
<script type="text/javascript">
 
	document.getElementById('addCover').onclick = function(){
 
		$('#file1').click();
		//$('#file1').trigger('click');
 
	};
</script>
</body>
</html>

Firefox v3.6.25

danielhagnoul · 27/01/2012, 21h48

Bonsoir

Les navigateurs ne sont pas d'accord sur l'affichage de l'input et le type de l'URL, mais ma variable "result" contient bien le résultat espéré sous IE9, C et F.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>file</title>
    <style>
        input { width:800px; }
    </style>
</head>
<body>
	<form id="formFile" action="monAction" enctype="multipart/form-data" method="POST">
        <input id='file1' type='file' name='file1' />
    </form>
    <button id="addCover">Ajouter le cover</button>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(function(){
            var result = "";
 
            $( "#file1" ).on( "change", function(){
 
                if ( result.length > 0 ){
                    result += " , " + $( this ).val();
                } else {
                    result = $( this ).val();
                }
 
                console.log( result );
            });
 
            $( "#addCover" ).on( "click", function(){
                $( "#file1" ).click();
            });
        });
    </script>
</body>
</html>

27/01/2012, 18h57	#5
malgache Membre éclairé Yann IUT Informatique Inscription : mars 2011 Messages : 342 Détails du profil Informations personnelles : Nom : Yann Localisation : France Informations professionnelles : Activité : IUT Informatique Informations forums : Inscription : mars 2011 Messages : 342 Points : 375 Points : 375	chaque input aura son propres code ? sinon tu peux essayé en bouclant avec un foreach...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email