Button event requires two clicks


I have a form with buttons that is inside a panel, the content is created dynamically, and the event does not respond with a single click.

$("#canilla1").click(function(event) {
$('input[value=SELECCIONAR]').on('click', function(){ 
    cliente = $("#codcli").val();
 var CC = $( '#cc' ).is(':checked');

This is how the code begins, that is, the system works perfectly, but apparently as it is an event within another requires two clicks, in fact if I click inside the panel, then with a click the button is activated.:

var contenido='<div class="col-sm-3" > '+
         '<div class="panel panel-danger" font-size:30px; name="canillas" >'+
          '<div class="panel-heading" name="unica"id="'+item.idcanilla+ '">CANILLA '+item.idcanilla+ '  ----           '+ item.nombre+'</div>'+
          '<div class="panel-body">'+
        '<table id="tcanilla" class="canilla">'+
   ' <thead>'+
    '<input type="button" class="btn-primary" value="SELECCIONAR" name="'+item.idbarril+'" id="'+item.idcanilla+'"'+

   ' </tbody>'+
      '     </div></div></div> ' +
      '  </div>';

The dynamic content is that, it is a panel inside a column 3 to enter 4 across. In turn, the button is inside a table inside that column. And canilla1 is a div in the main html. Because if I put

$('input[value=SELECCIONAR]').on('click', function(){ 

Only the code above the event does not listen to me.

How could you solve that problem?

asked by Caruso 16.11.2018 в 19:06

1 answer


The problem is that you are doing wrong the reference when assigning the event.

$('#canilla1').on('click', 'input[type=button]', function(){

In this way you delegate the click event to all input[type=button] within #canilla1 .

answered by 16.11.2018 / 21:59