0

Tengo el siguiente codigo jquery en el que cargo una tabla con todos los articulos y en cada fila un boton eliminar. Pero no logro detectar el click para jeecutar una funcion ajax. No entiendo porque no reconoce el button por name..Alguna sugerencia?

$(document).ready(function() {

listar();
cargarcombos();
var nombreBusqueda;
   $("input[name=eli]").on("click",function(){
         alert("s");
       });
 $("#nombre").keyup(function() {
            
        nombreBusqueda=$("#nombre").val();
        filtrar(nombreBusqueda);
    }
);
  var id;
  var nombre;
  var marca;
  var producto;
    var precio;

$("#Agregar").click(function(event){
  var cantidad=$("#CANTIDAD").val();
  
  if (cantidad!==""){
    var accion = "agregar";
    $.ajax({
	  
            type: "POST",
            url: "/includes/php/procesoDetalle.php",
            data: {accion,id,cantidad,nombre,marca,precio}, 
  dataType:'html',
            error: function(){
                alert("error petición ajax");
            },
            success: function(data){
             alert('agre');      
                      
            }
        }).fail( function( jqXHR, textStatus, errorThrown ) {

  if (jqXHR.status === 0) {

    alert('Not connect: Verify Network.');

  } else if (jqXHR.status == 404) {

    alert('Requested page not found [404]');

  } else if (jqXHR.status == 500) {

    alert('Internal Server Error [500].');

  } else if (textStatus === 'parsererror') {

    alert('Requested JSON parse failed.');

  } else if (textStatus === 'timeout') {

    alert('Time out error.');

  } else if (textStatus === 'abort') {

    alert('Ajax request aborted.');

  } else {

    alert('Uncaught Error: ' + jqXHR.responseText);

  }

});

    
  } else{
    alert("ingrese cantidad");
  }
});

});


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) {
        
      $("#resultado tbody").empty();
        
            for (var i = 0; i < filtrado.length; i++) {
          
                var newRow =
                    "<tr>" +
                    "<td>" + filtrado[i].idproducto + "</td>" +
                    "<td>" + filtrado[i].nombre + "</td>" +
                    "<td>" + filtrado[i].marca + "</td>" +
                    "<td>" + filtrado[i].categoria + "</td>" +
                    "<td>" + filtrado[i].precio + "</td>" +
                     "<td>"+
           " <a  class='btn btn-warning' href='index.php?controller=articulo&action=editar&id="+filtrado[i].idproducto+"'>Editar</a>"+
       "<input type='button' name='eli' value='Eliminar' class='btn btn-danger' id="+filtrado[i].idproducto+"/></td>"+
                  
                    "</tr>";
                  
                $(newRow).appendTo("#resultado tbody");                 
       }
 
	
  
}};
function listar(){

    tipofiltro="todos";
	 $.ajax({
	  
            type: "POST",
            url: "/includes/php/filtroP.php",
            data: { "tf": tipofiltro}, 
            dataType: "json",
            error: function(){
                alert("error petición ajax");
            },
            success: function(data){
           content=data;
               for (var i = 0; i < data.length; i++) {
          
                var newRow =
                    "<tr>" +
                    "<td>" + data[i].idproducto + "</td>" +
                    "<td>" + data[i].nombre + "</td>" +
                    "<td>" + data[i].marca + "</td>" +
                    "<td>" + data[i].detalle + "</td>" +
                    "<td>" + data[i].precio + "</td>" + "<td>"+
           " <a  class='btn btn-warning' href='index.php?controller=articulo&action=editar&id="+data[i].idproducto+"'>Editar</a>"+
            "<input type='button' name='eli' value='Eliminar' class='btn btn-danger' id="+data[i].idproducto+"/></td>"+
                  
                    "</tr>";
                $(newRow).appendTo("#resultado tbody");                 
       
    
               
            }
        
  

        }  
});

};
function cargarcombos(){
      $.ajax({
                            type: "POST",
                            url: "/includes/php/getmarcacat.php",
                            dataType: "json",                            
                            success: function(data){
                       
                            $.each(data,function(key, registro) {
        $("#marca").append('<option value='+registro.idmarca+'>'+registro.marca+'</option>');
      }); 
               }     }).fail( function( jqXHR, textStatus, errorThrown ) {

  if (jqXHR.status === 0) {

    alert('Not connect: Verify Network.');

  } else if (jqXHR.status == 404) {

    alert('Requested page not found [404]');

  } else if (jqXHR.status == 500) {

    alert('Internal Server Error [500].');

  } else if (textStatus === 'parsererror') {

    alert('Requested JSON parse failed.');

  } else if (textStatus === 'timeout') {

    alert('Time out error.');

  } else if (textStatus === 'abort') {

    alert('Ajax request aborted.');

  } else {

    alert('Uncaught Error: ' + jqXHR.responseText);

  }

}); 
 $.ajax({
                            type: "POST",
                            url: "/includes/php/getcategoria.php",
                            dataType: "json",                            
                            success: function(data){
                         
                            $.each(data,function(key, registro) {
        $("#categoria").append('<option value='+registro.idcategoria+'>'+registro.categoria+'</option>');
      }); 
               }     }).fail( function( jqXHR, textStatus, errorThrown ) {

  if (jqXHR.status === 0) {

    alert('Not connect: Verify Network.');

  } else if (jqXHR.status == 404) {

    alert('Requested page not found [404]');

  } else if (jqXHR.status == 500) {

    alert('Internal Server Error [500].');

  } else if (textStatus === 'parsererror') {

    alert('Requested JSON parse failed.');

  } else if (textStatus === 'timeout') {

    alert('Time out error.');

  } else if (textStatus === 'abort') {

    alert('Ajax request aborted.');

  } else {

    alert('Uncaught Error: ' + jqXHR.responseText);

  }

}); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="includes/js/abmprod.js"></script>

<div class="row" style="left: 2%;">
<p>
ARTICULOS

 
        <label>Mostrar
            <select>
            
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
            </select>
            registros por pagina</label>
    <a class="btn btn-primary pull-right" href="index.php?controller=articulo&action=registrar">Agregar</a>
</p>
</div>
 <div class="form-group">
    <label class="col-sm-1 control-label">COD</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" id="cod" placeholder="Codigo Articulo"/>
    </div>



    <label class="col-sm-1 control-label">NOMBRE</label>
    <div class="col-sm-7">
      <input type="text" class="form-control" id="nombre" placeholder="Nombre Articulo"/>
   
  </div>
 </div>

<div class="row">
<table id="resultado">
<caption>Catalogo de articulos</caption>
<thead>
<tr> <th>COD.:</th> <th>DESCRIPCION</th> <th>MARCA</th>
            <th>CATEGORIA</th> <th>P/U</th><th>Accion</th>
            </tr></thead>
            <tbody>
            
            </tbody>
</table>
</div>
Ahi esta el codigo completo..lo que ocurre que trabajo con MVC entonces el head esta en index.php Tambien probe con:

  $("input[name=eli]").on("click",function(){
     alert("s");
   });
2
  • La primer forma en que intentas es correcta y me funciona sin problema, mera duda, tienes cargado jquery al inicio?, te sale algún error?
    – user128299
    Commented el 25 ago. 2019 a las 13:51
  • No sale ningun error, y si en inspeccionar elemento aparece jquery dentro del head y en network se carga correctamente.
    – Caruso
    Commented el 25 ago. 2019 a las 14:58

2 respuestas 2

1

Lo que pasa es que como insertas ese input dinámicamente tu script está apuntando al evento de ese input que en un inicio(cuando carga el script) no existe. Lo adecuado es que uses otro elemento como contexto para tal input, en este caso podría ser así:

$("#resultado tbody").on("click", "input[name=eli]", function() {
  alert("s");
});
0

Tal y como dice Christian, el problema es la generación diámica del contenido html Deberías cambiar la función filtrar por esta otra:

 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) {

          $("#resultado tbody").empty();

                for (var i = 0; i < filtrado.length; i++) {

                    var newRow =
                        "<tr>" +
                        "<td>" + filtrado[i].idproducto + "</td>" +
                        "<td>" + filtrado[i].nombre + "</td>" +
                        "<td>" + filtrado[i].marca + "</td>" +
                        "<td>" + filtrado[i].categoria + "</td>" +
                        "<td>" + filtrado[i].precio + "</td>" +
                         "<td>"+
               " <a  class='btn btn-warning' href='index.php?controller=articulo&action=editar&id="+filtrado[i].idproducto+"'>Editar</a>"+
           "<input type='button' name='eli' value='Eliminar' class='btn btn-danger' id="+filtrado[i].idproducto+"/></td>"+

                        "</tr>";

                    $(newRow).appendTo("#resultado tbody");                 
           }  
    }
        $("input[name=eli]").on("click",function(){
                alert("s");
              });
    };

De esta manera asocias la función al evento on una vez el contenido se ha agregado.

3
  • Si pongo un alert en el ready lo muestra perfectamente, de hecho en inspeccionar elemento se ve perfecta la carga de jquery.
    – Caruso
    Commented el 25 ago. 2019 a las 15:58
  • 1
    Puedes incluir el html y script completo para que podamos testearlo? Gracias.
    – David
    Commented el 25 ago. 2019 a las 16:06
  • Gracias ahi inclui el codigo completo
    – Caruso
    Commented el 25 ago. 2019 a las 16:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.