problem with click event reference inside a div

Question

I’m having a reference problem in the click event, I don’t know what is avoiding the functionality of the jquery click function, here’s my code below for analysis:

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');
                              });

The click event of div’s box1...until 5 that are inside the container_principal_box_search do not work, even if I reference the click event of div whose id is the container_principal_box_search it works normally. What could it be? Someone can help me?

Answer 1

This is happening because you are doing the event click on an element that is being created dynamically, someone with a better knowledge of DOM can explain better the reason for this, but I have already gotten this problem recommend you take a look at the method on() of jquery. To solve this element just take a parent element that is in html and was not created dynamically using on this way $(elementoMae).on('evento','#elementoCriadoDinamicamente',function(){})

in your case try: $(div).on('click','#box_pesquisa_1',function(){ codigo aqui });

Here below you will have a better example of what I said, sorry for the explanation a little muddled but I believe that this will solve your problem.

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>

Answer 2

To the extent that the divs, assign the event click.

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

Example:

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>