Fonctionnement de .click() sous firefox

Version imprimable

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:

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 :)

27/01/2012, 18h41
malgache
Salut,

Si tu charge JQuery tu peux faire:
Code:

1 2 3 4 $("#tonId").click(function(){ // Code à exécuter });
27/01/2012, 18h44
Jonathan.Harvey
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:

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

Je viens de tester sur Firefox et

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

27/01/2012, 18h57
malgache

chaque input aura son propres code ?

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

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

foreach ?

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

Mais sa fonctionne avec IE !
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 <!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

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:

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>