0

Estou tendo um problema de referência no evento de click, não sei o que está evitando a funcionalidade da função de click do jquery, eis o meu código abaixo para análise:

div = $('#container_principal_box_pesquisa');

                            contador =1;

                            for(i=0; i<data.length; i++){
                              if(i < 5){
                                 div.append('<div id="box_pesquisa_'+contador+'">'+data[i]+'</div>');
                                 id = $('#box_pesquisa_'+contador);
                                 div.find('img').width(60);
                                 div.find('img').height(60);
                                 contador++;
                              }
                            } 



                              box1 = $("#box_pesquisa_1");  
                              box2 = $("#box_pesquisa_2");  
                              box3 = $("#box_pesquisa_3");  
                              box4 = $("#box_pesquisa_4");  
                              box5 = $("#box_pesquisa_5");  

                              box1.click(function(){
                                alert('teste');
                              });

O evento de click das div's box1...até 5 que estão dentro do container_principal_box_pesquisa não funcionam, mesmo fazendo a referência, já quando eu referencio o evento de click da div cujo id é o container_principal_box_pesquisa ele funciona normalmente. O que poderia ser? alguém pode me ajudar?

2 Respostas 2

0

Na medida em que for criando as divs, atribua o evento click.

$('<div id="box_pesquisa_'+contador+'">
nova div '+contador+'</div>').appendTo(div)
.on('click', function() {....});

Exemplo:

var div = $('#container_principal_box_pesquisa');

contador =1;

for(i=0; i<10; i++){

if(i < 5){

$('<div id="box_pesquisa_'+contador+'">nova div '+contador+'</div>').appendTo(div).on('click', function() {

console.log($(this).attr('id'));

});

contador++;

}

} 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container_principal_box_pesquisa"></div>

1
  • 1
    Funcionou perfeitamente, obrigado!!! 28/02/2017 às 16:42
0

Isso está acontecendo pq vc está fazendo o evento click em um elemento que está sendo criado dinamicamente, alguem com um melhor conhecimento de DOM pode explicar melhor o motivo disso, porém já obtive esse problema recomendo você dá uma olhada no método on() do jquery. Para resolver esse elemento basta pegar um elemento mãe que está no html e não foi criado dinamicamente usando on desse jeito $(elementoMae).on('evento','#elementoCriadoDinamicamente',function(){})

no seu caso tente: $(div).on('click','#box_pesquisa_1',function(){ codigo aqui });

Aqui abaixo vai ter um exemplo melhor sobre o que falei, desculpa pela explicação um pouco atrapalhada mas acredito que isso vai resolver o seu problema.

div = $('#container_principal_box_pesquisa');

function criaDiv(quantidade){
var html = "";
  for(var i = 1; i <= quantidade; i++){
		html += '<div class="bg-danger" id="box_pesquisa_'+i+'">';
    html += '<p> box_pesquisa_'+i+' </p>';
    html += '</div>';
    
  }
return html;
}

div.append(criaDiv(5));

$(div).on("click","#box_pesquisa_1",function(){
	alert("box_pesquisa_1");
});

$(div).on("click","#box_pesquisa_2",function(){
	alert("box_pesquisa_2");
});

$(div).on("click","#box_pesquisa_3",function(){
	alert("box_pesquisa_3");
});

$(div).on("click","#box_pesquisa_4",function(){
	alert("box_pesquisa_4");
});

$(div).on("click","#box_pesquisa_5",function(){
	alert("box_pesquisa_5");
});
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<div class="bg-warning" id="container_principal_box_pesquisa">
 &nbsp;
</div>

3
  • Obrigado pela resposta, consegui resolver, foi bem simples. Obrigado mesmo pela ajuda! 28/02/2017 às 16:43
  • Estou com o mesmo problema, mas queria o resolver sem jquery apenas javascript vanilla, como faço isso?
    – tomas
    6/04/2020 às 8:14
  • @TheCoder no seu caso, como vc quer delegar um evento a um elemento criado dinamicamente e só usar vanilla js, vc pode adicionar um event listener no document e checar o id ou class do elemento que foi clicado exemplo: jsfiddle.net/nk021zjv 7/04/2020 às 9:28

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 .