Button not created dynamically

Question

Button not created dynamically

Navigation

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

0

I have this code in a .js file, that when loading the list of clients, in each row of the table there is an edit, a low and a high.

As you can see I have a code in the click event but it does not respond with anything:

$(document).ready(function() {
    listar();
    $("#nombre").keyup(function() {
            
        nombreBusqueda=$("#nombre").val();
        filtrar(nombreBusqueda);
    }
);
$('input[name=baja]').click(function(){
   
       var id=$(this).attr('id');
     
        accion='baja';
           $.ajax({

   
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: {"accion":accion,"id":id}, 
           

            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
                alert("Baja exitosa");
                href="modules/cliente/edicionCliente.php"
           }
           
        
});
   
      });
      $('input[name=alta]').click(function(){
   
       var id=$(this).attr('id');
     
        accion='alta';
           $.ajax({

   
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: {"accion":accion,"id":id}, 
           

            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
                alert("Alta exitosa");
                href="modules/cliente/edicionCliente.php"
           }
           
        
});
   
      });
$("#editar").click(function(){
    
    alert("dd");

  var accion="obtener";

        
        $.ajax({

   
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: {"accion":accion,"id":id}, 
             dataType:"json",

            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
        
            $("#Nombre").val(data[0].nombre);
            $("#CUIT").val(data[0].CUIT);
            $("#Fijo").val(data[0].telfijo);
            $("#Celular").val(data[0].celular);
            $("#domicilio").val(data[0].direccion);
           }
           
        });   
        });
$("#guardar").click(function(){
    var CUIT;
    var fijo;
    var celular;
    var domicilio;
   var accion="guardar";
   var nombre=$("#Nombre").val();
   if ($("#CUIT").val()==""){
    CUIT=0;
   }else{
     CUIT=$("#CUIT").val();
   }
   if ($("#Fijo").val()==""){
    fijo=0;
   }else{
     fijo=$("#Fijo").val();
   }
   if ($("#Celular").val()==""){
    celular=0;
   }else{
     celular=$("#Celular").val();
   }
   if ($("#Celular").val()==""){
    domicilio=0;
   }else{
     domicilio=$("#domicilio").val();
   }
  
 
   $.ajax({

   
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: {"accion":accion,"id":id,"nombre":nombre,"CUIT":CUIT,"fijo":fijo,"cel":celular,"domicilio":domicilio}, 
           

            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
                alert("Actualizacion exitosa");
                href="modules/cliente/edicionCliente.php"
           }
           
        
});

        
 
	 });

    
  
      });
      function filtrar(dato){
        var filtrado=[];
        var existe;
    for(var i = 0; i < content.length; i++) {
    if (content[i].nombre.toLowerCase().indexOf(dato.toLowerCase())!=-1) {
        filtrado.push(content[i]);
        
       
    }
}
     if (filtrado.length>0) {
        
      $("#clientes tbody").empty();
        
              for (var i = 0; i < filtrado.length; i++) {
          
                var newRow =
                    "<tr>" +
                    "<td>" + filtrado[i].CUIT + "</td>" +
                    "<td>" + filtrado[i].nombre + "</td>" +
                    "<td>" + filtrado[i].celular + "</td>" +
                    "<td>" + filtrado[i].direccion + "</td>" +
                    "<td>" + filtrado[i].deduda + "</td>" +
                     "<td>"+
          "<a class='btn btn-warning' href='index.php?controller=cliente&action=editar&id="+filtrado[i].idcliente+"'>Editar</a>"+
            "<input type='button' id="+filtrado[i].idcliente+" value='Baja' name='baja' class='btn btn-danger'/>"+
        "<input type='button' id="+filtrado[i].idcliente+" value='Alta' name='alta' class='btn btn-primary' /></td>"+
                    "</tr>";                 
        $(newRow).appendTo("#clientes tbody");
    
               
            }
	
  
}};
function listar(){

    accion="listar";
	 $.ajax({
	  
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: { "accion": accion}, 
            dataType: "json",
            error: function(){
                alert("error petición ajax");
            },
            success: function(filtrado){
           content=filtrado;
               for (var i = 0; i < filtrado.length; i++) {

                var newRow =
                    "<tr>" +
                 
                    "<td>" + filtrado[i].CUIT + "</td>" +
                    "<td>" + filtrado[i].nombre + "</td>" +
                    "<td>" + filtrado[i].celular + "</td>" +
                    "<td>" + filtrado[i].direccion + "</td>" +
                    "<td>" + filtrado[i].deduda + "</td>" +
                     "<td>"+
         "<a class='btn btn-warning' href='index.php?controller=cliente&action=editar&id="+filtrado[i].idcliente+"'>Editar</a>"+
            "<input type='button' id="+filtrado[i].idcliente+" value='Baja' name='baja' class='btn btn-danger'/>"+
        "<input type='button' id="+filtrado[i].idcliente+" value='Alta' name='alta' class='btn btn-primary' /></td>"+
                    "</tr>";
               $(newRow).appendTo("#clientes tbody");                
        
    
               
            }
         
  

        }  
});
};

The filtering works perfectly and if you load the data obviously. Is the low and high what does not work any suggestion?

javascript

asked by Caruso 30.10.2018 в 14:51

source

3 answers

2

The problem is that you create the buttons after assigning the click events, that is, when you make the "$ ('input [name = low]'). click (...." the buttons do not yet exist.

You should replace that click assignment with an event that is called from the button. For example, the low function would be something like this:

function baja(elem){
       var id=$(elem).attr('id');
       accion='baja';
           $.ajax({
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: {"accion":accion,"id":id}, 
            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
                alert("Baja exitosa");
                href="modules/cliente/edicionCliente.php"
           }      
});

and when you create the button you should do it like this:

...
"<input type='button' onclick='baja(this)' id="+filtrado[i].idcliente+" value='Baja' name='baja' class='btn btn-danger'/>"+
...

Good luck!

answered by 30.10.2018 в 14:57

1

one of the reasons why the dynamically created objects seem not to respond to events, is that, when you wrote this part: $('input[name=baja]').click() the buttons did not exist yet, then the buttons that were created later do not have "assigned" that event.

What you can do is call an element that is already created, such as the document :

$(document).on('click','input[name=baja]',function(){
    //  aquí metes el código
});

I hope it serves you.

answered by 30.10.2018 в 15:05

Show ajax query in gridview or VB.NET table Fuel Consumption C ++

score 0 · Accepted Answer

If the buttons are dynamically created, I would advise you to use the following structure:

 $("padre").on("click", "input[name=baja]", function() {
     //lo que queres que haga
 }

Now your button is inside a table, if the table has some id or class use that selector instead of $("padre") , this structure is used with dynamically created elements.

I hope it helps you