$ (document) .on (“click”… não está funcionando?

Existe um erro bem conhecido que eu poderia estar cometendo aqui?

Eu tenho um script que está usando .on () porque um elemento é gerado dinamicamente e não está funcionando. Apenas para testar, substituí o seletor pelo envoltório do elemento dynamic, que é estático e ainda não funcionou! Quando mudei para o velho e simples .click para o envoltório funcionou, no entanto.
(Isso simplesmente não funcionará para o elemento dynamic, obviamente, o que importa).

Isso funciona:

$("#test-element").click(function() { alert("click"); }); 

Isso não:

 $(document).on("click","#test-element",function() { alert("click"); }); 

ATUALIZAR:

Cliquei com o botão direito do mouse e fiz “Inspect Element” no Chrome para verificar duas vezes algo e, depois disso, o evento de clique funcionou. Eu atualizei e não funcionou, inspecionei o elemento, e então funcionou. O que isto significa?

Você está usando a syntax correta para vincular ao documento para ouvir um evento de clique para um elemento com id = “test-element”.

Provavelmente não está funcionando devido a um dos seguintes:

  • Não usando a versão recente do jQuery
  • Não quebra seu código dentro do DOM pronto
  • ou você está fazendo algo que faz com que o evento não borbulhe para o ouvinte no documento.

Para capturar events em elementos que são criados DEPOIS de declarar seus ouvintes de events – você deve ligar a um elemento pai ou elemento superior na hierarquia.

Por exemplo:

 $(document).ready(function() { // This WILL work because we are listening on the 'document', // for a click on an element with an ID of #test-element $(document).on("click","#test-element",function() { alert("click bound to document listening for #test-element"); }); // This will NOT work because there is no '#test-element' ... yet $("#test-element").on("click",function() { alert("click bound directly to #test-element"); }); // Create the dynamic element '#test-element' $('body').append('
Click mee
'); });

Neste exemplo, somente o alerta “vinculado ao documento” será acionado.

JSFiddle com jQuery 1.9.1

Seu código deve funcionar, mas estou ciente de que a resposta não ajuda você. Você pode ver um exemplo de trabalho aqui (jsfiddle) .

Jquery:

 $(document).on('click','#test-element',function(){ alert("You clicked the element with and ID of 'test-element'"); }); 

Como alguém já apontou, você está usando um ID em vez de uma class. Se você tiver mais de um elemento na página com um ID, o jquery retornará apenas o primeiro elemento com esse ID . Não haverá erros porque é assim que funciona. Se esse for o problema, você notará que o evento click funciona para o primeiro test-element mas não para nenhum que se segue.

Se isso não descrever com precisão os sintomas do problema, talvez o seu seletor esteja errado. Sua atualização me leva a acreditar que este é o caso por causa de inspecionar um elemento, em seguida, clicar na página novamente e acionar o clique. O que poderia estar causando isso é se você colocar o listener de events no document real em vez de test-element . Nesse caso, quando você clica no documento e volta (como da janela do desenvolvedor para o documento), o evento será acionado. Se esse for o caso, você também notará que o evento click será acionado se você clicar entre duas guias diferentes (porque elas são dois document diferentes e, portanto, você está clicando no documento.

Se nenhuma dessas respostas for a resposta, postar HTML será uma boa maneira de descobrir isso.

Um post antigo, mas eu gosto de compartilhar como eu tenho o mesmo caso, mas eu finalmente sabia o problema:

O problema é: Fazemos uma function para trabalhar com um elemento HTML especificado, mas o elemento HTML relacionado a essa function ainda não foi criado (porque o elemento foi gerado dinamicamente). Para fazer isso funcionar, devemos fazer a function ao mesmo tempo em que criamos o elemento. Elemento primeiro do que fazer function relacionada a ele.

Simplesmente palavra, uma function só funciona para o elemento que criou antes dele (ele). Quaisquer elementos criados dinamicamente significam depois dele.

Mas, por favor, inspecione esta amostra que não atendeu ao caso acima:

 

Dinamicamente anexado:

  

Esta function está funcionando bem clicando no botão:

 $(document).ready(function() { $('#selected-country').on('click','.btn-map', function(){ var datacountry = $(this).data('country'); console.log(datacountry); }); }) 

ou você pode usar o corpo como:

 $('body').on('click','.btn-map', function(){ var datacountry = $(this).data('country'); console.log(datacountry); }); 

Compare com isso que não está funcionando:

 $(document).ready(function() { $('.btn-map').on("click", function() { var datacountry = $(this).data('country'); alert(datacountry); }); }); 

espero que ajude

Tente isto:

 $("#test-element").on("click" ,function() { alert("click"); }); 

O jeito do documento de fazer isso também é estranho. Isso faria sentido para mim se fosse usado para um seletor de class, mas no caso de um id, você provavelmente teria DOM inútil atravessando lá. No caso do seletor de id, você obtém esse elemento instantaneamente.

Isso funciona:

 
Click Me
$(document).on("click","#test-element",function() { alert("click"); }); $(document).on("click","#start-element",function() { $(this).attr("id", "test-element"); });

Aqui é o violino