problem with click event reference inside a div

Question

problem with click event reference inside a div

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am having a reference problem in the click event, I do not know what is preventing the functionality of the jquery click function, here is 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 the div's box1 ... up to 5 that are inside the container_principal_box_search does not work, even when doing the reference, even when I refer to the div's click event whose id is the container_principal_box_search it works normally. What could it be? Can someone help me?

javascript jquery

asked by anonymous 28.02.2017 / 15:27

2 answers

0

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 of this, however I have already obtained this problem I recommend you take a look at method on () of jquery . To solve this element, just get 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 somewhat embarrassed explanation but I believe 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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<div class="bg-warning" id="container_principal_box_pesquisa">
 &nbsp;
</div>

28.02.2017 / 16:29

Style of the widgets of a program using PyQt5 Install Python Curl library 3.4.4

score 0 · Accepted Answer

As long as you create 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><divid="container_principal_box_pesquisa"></div>