1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Porque a ordem do Script no HTML influencia no funcionamento?

Olá pessoal, estava desenvolvendo uma página web quando me deparei com um problema. Um script que não executava:

<script>
    $(".showgif").click(function () {
        $(".gif").toggle("slow");
    });
</script>

<button class="showgif">[VER GIF]</button>
<div class="gif">
    <img src="img/1.gif" alt="Selecionar arquivo" style="width:600px;height:300;">
</div>

Consegui contornar o problema colocando o Script abaixo do html que fazia a chamada, desse jeito:

<button class="showgif">[VER GIF]</button>
<div class="gif">
    <img src="img/1.gif" alt="Selecionar arquivo" style="width:600px;height:300;">
</div>

<script>
    $(".showgif").click(function () {
        $(".gif").toggle("slow");
    });
</script>

Eu fiquei curioso, pois não entendi o porque de no primeiro caso não funcionar e no segundo sim. Alguém poderia me explicar?

  • Boa noite, no caso o jquery assim que for executado vai tentar achar elementos com a classe showgif, mas até aquele momento ainda não existia. O certo seria você fazer assim:

    aqui o restante do código

    pois somente quando o documento for carregado que seria executado o código.

    espero ter ajudado

    um abraço

    tebosoftware   07 de abr de 2016
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

2 respostas

Não é a resposta que estava procurando? Procure outras perguntas com as tags javascript jquery html ou faça a sua própria pergunta.