2

Tenho um sistema AJAX em PHP e tenho um index.php onde possuo todos src js incluídos:

<head>

<link rel="stylesheet" href="/assets/fileinput/css/fileinput.min.css" media="all" type="text/css" />
<script src="/assets/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="/assets/fileinput/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="/assets/fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/assets/fileinput/js/fileinput_locale_pt-BR.js"></script>

</head>

E carrego outras paginas php no mesmo index.php com o jquery div load, por exemplo:

$('#div').load("page.php",{foo : bar});

A pagina page.php é carregada na div corretamente, porem quando chamo uma classe do fileinput por exemplo o sistema não entende, como se não estive declarado os js src's

<input id="foto" name="foto" type="file" multiple class="file-loading">

Acho que qualquer outra funcao jQuery que chame de algum js plugin não encontraria tb, o fileinput é apenas um exemplo. Se declaro os js src, styles na page.php o sistema roda corretamente, mas estarei declarando 2 vezes a mesma coisa. Teria alguma forma de fazer isto declarando uma vez apenas?

1 Resposta 1

1

Isso acontece porque o INPUT foi inserido depois, isso é conhecido como um elemento dinâmico no Javascript.

Várias funções nativas (ex: .click) ou não (ex: .select2), não funcionam antes que o elemento exista, na verdade todas as funções funcionam de tal forma.

A alternativa é usar:

$('#div').load("page.php",{foo : bar}, function(){ $('#foto').fileinput(); } );

Eu não li toda a documentação do JS File Input, dei uma olhada neste momento. Mas, a ideia é inicializar o input depois de carregar o conteúdo.

Entretanto o problema não é isolado ao "fileinput", portanto o importante é que compreenda sobre os elementos dinâmicos em si.

Elementos dinamicos

Observe este problema, similar:

$('button').click(function(){
  alert('Funcionou!');  
  $('body').append('<br><button>Isso agora não funciona</button>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button>Isso funciona</button>
</body>

O motivo é o mesmo do seu problema! O .click apenas atinge o primeiro botão, que já havia quando o JQuery foi acionado.

Porém caso faça isso:

function button(){
  
    $('button').click(function(){
      alert('Funcionou!');  
      $('body').append('<br><button>Isso agora não funciona (#SQN)</button>');
      $('button').off(); 
      button();
    });

}

button();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <body>
    <button>Isso funciona</button>
    </body>

A cada inserção estará novamente declarando o .click dessa forma estará lendo/identificado/monitorando o objeto inserido dinamicamente. Se optar por fazer isto observe o .off(), caso ignore isto irá duplicar a ação dos botões existentes.

No caso especifico desse exemplo, existe algo melhor a ser feito:

$('body').on('click', 'button', function(){
          alert('Funcionou!');  
          $('body').append('<br><button>Isso agora não funciona (#SQN)</button>');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button>Isso funciona</button>
</body>

O .on() monitora o body definido previamente. O body não é dinâmico (exceto se criar um novo body, mas não é comum). Mesmo assim, elementos dinâmicos podem ser inseridos dentro do body, como este botão. Desta forma ao clicar dentro do body o JQuery verifica se o elemento clicado é um button. Isso permite que insira inúmeros elementos de button dinamicamente, desde que dentro do body.

1
  • Interessante, entendi o conceito da coisa. Muito obrigado pela ajuda, vou dar uma lida a mais na doc do fileinput, teria mais alguns argumentos para funcionar do jeito que quero, mas é isso mesmo que vc falou. Valeu demais! 30/03/2016 às 13:59

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 .