Por que essa função de clique do jQuery não está funcionando?

116

Código:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

O código acima não funciona. Quando clico em #clicker, ele não alerta e não se esconde. Verifiquei o console e não recebo erros. Também verifiquei se o JQuery estava carregando e de fato está. Portanto, não tenho certeza de qual é o problema. Eu também fiz uma função de documento pronto com um alerta e funcionou, então não tenho certeza do que estou fazendo de errado. Por favor ajude. Obrigado!

javascript jquery onclick click onclicklistener starbucks
fonte
3
Envolva o código em document.ready
karthikr
1
você verificou o console do navegador se há algum erro, sintaxe ou arquivo não encontrado ou algo mais?
Siddharth Pandey
1
Possível duplicata de Por que o jQuery ou um método DOM, como getElementById, não encontra o elemento?
user4642212

Respostas:

180

Você deve adicionar o código javascript em um $(document).ready(function() {});bloco.

ie

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

Como afirma a documentação do jQuery : "Uma página não pode ser manipulada com segurança até que o documento esteja" pronto ". O jQuery detecta esse estado de prontidão para você. O código incluído $( document ).ready()só será executado quando a página Document Object Model (DOM) estiver pronta para JavaScript código para executar "

mobius
fonte
7
Quão estúpido da minha parte !! Ainda aprendendo. Achei que a função de clique não precisava de uma, pois ela é ativada clicando em vs document.já onde carrega no carregamento da página.
starbucks
7
@starbucks Não se preocupe muito com isso, todos cometem erros, especialmente quando aprendem :)
mobius
4
A função de documento pronto configura os ouvintes com base no que encontra na página. Se você não fizer isso, eles nunca serão configurados. A melhor maneira de fazer isso, entretanto, é delegá-los com a função "on ()". Dessa forma, quaisquer elementos adicionados à página após o carregamento ainda funcionarão!
Sean Kendle
1
Além disso, com a função "on", você não precisa realmente usar a função de documento pronto. Ele define o ouvinte para o nível do documento e, em seguida, raspa a página para os elementos a serem ouvidos. É por isso que é um pouco mais rápido ser um pouco mais específico sobre o tipo de elemento que você deseja ouvir, como "div.listentome" em oposição a ".listentome". Em vez de verificar cada elemento para a classe "listentome", ele verifica apenas os divs, neste exemplo.
Sean Kendle
2
@SeanKendle - Não é assim que .on()funciona. Você pode (opcionalmente) usá-lo para criar manipuladores delegados, mas de qualquer forma ele não "raspa a página", ele vincula um ouvinte ao (s) elemento (s) específico (s) no objeto jQuery em que você o chama.
nnnnnn
65

Eu encontrei a melhor solução para este problema usando ON com $ (document).

 $(document).on('click', '#yourid', function() { alert("hello"); });

para id começar com veja abaixo:

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

finalmente, após 1 semana, não preciso adicionar o onclick triger. Espero que isso ajude muitas pessoas

user5636597
fonte
2
Ah, obrigado, o acima não funcionou para mim, mas funcionou! (provavelmente alguma interação estranha com angular e roteamento)
Flink
Assim como Flink, também resolvi problemas com isso. Obrigado .. 100 votos positivos ..
Zeta
3
É chamado de delegação e é necessário para conteúdo inserido ou movido dinamicamente
mplungjan
Este funcionou para mim! Obrigado :)
Amrit Pal Singh
20

Seu código pode funcionar sem document.ready (), apenas certifique-se de que seu script está após o #clicker. Confira esta demonstração: http://jsbin.com/aPAsaZo/1/

A ideia no conceito pronto. Se você tiver certeza de que seu script é a última coisa em sua página ou está depois do elemento afetado, ele funcionará.

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

Aviso: nojsbindemo substitua httppor httpslá no código, ou use esta variante Demo

SaidbakR
fonte
11
+1 - Sua resposta explica por que a document.ready()função é necessária.
Kevin
1
Esta é uma resposta melhor porque a sugestão de que o script jquery deve estar dentro de uma função 'document.ready ()' é enganosa. Sim, é mais seguro lá, mas se você configurar o elemento html para uma função jquery em tempo real (como consultar uma linha de tabela dependendo de qual botão é clicado), ele precisa estar fora / depois dessa função. Por engano, alterei o nome do div de destino para minhas sobreposições pop-up e passei várias horas frustrantes procurando um erro de script. Grande lição aprendida.
johnlholden
Esta é uma resposta errada, porque o código JS deve estar no cabeçalho do DOM e não embutido. O fato de você ter passado várias horas procurando o erro de script não é um problema de JS, é seu problema não ler os documentos corretamente e não saber como usar ferramentas de depuração.
Andrey Shipilov
@AndreyShipilov Quem disse isso, basta olhar o código-fonte desta página e descer até o final, você verá o código javascript lá.
SaidbakR
1
@AndreyShipilov - você sabe como usar ferramentas de depuração para solucionar esse problema? Então, por favor, compartilhe seu conhecimento com outras pessoas, em vez de ofendê-las. Tente ser construtivo e justo.
Matt
6

Você tem que embrulhar seu código Javascript com $(document).ready(function(){});Look this JSfiddle .

Código JS:

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});
Ovelha negra
fonte
5

Tente adicionar $(document).ready(function(){ao início do seu script e então });. Além disso, o divtem o id corretamente, ou seja, como um id, não uma classe, etc.?

tjons
fonte
3

Certifique-se de que não haja nada em seu botão (como um div ou uma imagem transparente) que impeça de clicar no botão. Parece estúpido, mas às vezes pensamos que o jQuery não está funcionando e todas essas coisas e o problema está no posicionamento dos elementos DOM.

vicgilbcn
fonte
ou, por exemplo, z-index!
um darren de
3

Você pode usar o $(function(){ // code });que é executado quando o documento estiver pronto para executar o código dentro desse bloco.

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});
Rakyesh Kadadas
fonte
2

Apenas uma verificação rápida, se você estiver usando o mecanismo de modelagem do lado do cliente, como guidão, seu js será carregado após document.ready, portanto, não haverá nenhum elemento para vincular o evento, portanto, use o manipulador onclick ou no corpo e verifique o alvo atual

Abhinav Singh
fonte
então é verdade, estou usando flask / jinja e não está funcionando a menos que eu use a propriedade onclick no HTML e me refira a uma função em meu <script>
Rich Stone