1

HTML

<div class="send">click<input name="files[]" class="file" type="file"></div>

Javascript:

$('body').on('click', '.send', function(e) {
     $(document).find('.file').click();
});

CSS:

 input {
   opacity: 0;
 }

ao clicar em "click" é retornado o erro, pois ele detecta clique na div pai e div filha provocando um loop, como resolver? Eu anseio apenas abrir a input file.

ex: https://jsfiddle.net/s5rzjfhn/3/

0

1 Resposta 1

2

O problema é que quando fazes .find('.file').click(); ele vai disparar um evento no elemento pai também, por propagação no DOM.

Tens de juntar um outro auscultador de eventos que pare a propagação do evento ao elemento pai, logo no input.

$('body').on('click', '.send_file', function(e) {
    e.stopPropagation();
});

jsFiddle: https://jsfiddle.net/xsoxrbw0/

Porém a maneira que me parece melhor para fazer isso é sem JavaScript. Usando só um label assim:

<label class="send normal_send">click
    <input name="files[]" class="send_file" type="file">
</label>

jsFiddle: https://jsfiddle.net/jzacpz2p/

1
  • Não conhecia essa da label testei em meu script mas não funcionou, deve ser por causa que é um icone feito com o :before. Obrigado pela solução!!
    – Elaine
    Commented 13/03/2016 às 0:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .