0

Estoy intentando llamar una función para html añadido con append, por alguna razón el código siguiente no llama la función set_file en el evento onclick del botón:

    var maxAppend=0;
    function addRow() {  
          let html = "<tr>" +
            "<td><input class='form-control' type='text' id='datepicker' value='dd/mm/YYYY' size='6'></td>" +
            "<td><input class='form-control' type='text' size='1'/></td>" +
            "<td><textarea class='form-control' rows='2' cols='25'></textarea></td>" +
            "<td><input class='form-control' type='text' size='1'/></td>" +
            "<td><input class='form-control' type='text' size='1'/></td>" +
            "<td><select class='form-control'><option>Entidad</option></select></td>" +
            "<td><select class='form-control'><option>Tipo</option></select></td>" +
            "<td><button type='button' onclick='set_file("+maxAppend+",1)' id='get_file"+maxAppend+"1' class='btn btn-primary'><span class='glyphicon glyphicon-upload' style='float:right;display: inline-block;' aria-hidden='true'></span></button></td>" +
            "<input type='file' id='my_file"+maxAppend+"1'>" + 
            "<td><button type='button' onclick='set_file("+maxAppend+",2)' id='get_file"+maxAppend+"2' class='btn btn-primary'><span class='glyphicon glyphicon-upload' style='float:right;display: inline-block;' aria-hidden='true'></span></button></td>" +
            "<input type='file' id='my_file"+maxAppend+"2'>" +  
            "<td><button type='button' class='btn btn-warning'><span class='fa fa-edit' style='float:right;display: inline-block;' aria-hidden='true'></span></button></td>" +
            "</tr>";
            $("#table_retentions").append(html);
            maxAppend++;
        }
  function set_file(i,j){
     $('#my_file'+i+j).click();
  }

La consola no muestra errores ni warnings, ¿Qué es lo que estará mal?

5
  • En el código que muestras no llamas la función en ningún momento, solo la declaras el 26 jul. 2021 a las 13:34
  • @CamiloGomez en elemento button está la llamada onclick='set_file("+maxAppend+",1)' el 26 jul. 2021 a las 13:37
  • Cierto, no vi eso. Una cosa que noto es que en esa llamada tienes "+maxAppend+" como primer argumento. No veo esta variable declarada, pero este argumento es un numero, entonces los + antes y después deben estar causando el problema el 26 jul. 2021 a las 13:47
  • @CamiloGomez es una variable global, la agregué al código, el html que se forma creo que está bien y forma bien la llamada, pero no la ejecuta. el 26 jul. 2021 a las 13:50
  • La llamada a la función set_file() se te tiene que estar haciendo correctamente, si le pones un console.log() verás que se te está pintando. El problema lo tienes en lo que hace esa función. Con $('#my_file'+i+j).click(); estás llamando al onclick de unos elementos que no tienen ningún evento click asociado, por lo que no ocurre nada. De todas formas creo que te estás complicando mucho la vida para tratar de afectar a un input que pertenezca a la misma fila que el botón que lanza la función. Te recomiendo que mires sobre el selector this de JQuery: $(this)
    – phpMyGuel
    el 26 jul. 2021 a las 14:53

1 respuesta 1

1

en tu fila de la tabla. colocalo algo asi

 "<td><button type='button' data-maxapp='+maxAppend+' data-idfuncion='+1+'  id='get_file"+maxAppend+"1' class='btn btn-primary'><span class='glyphicon glyphicon-upload' style='float:right;display: inline-block;' aria-hidden='true'></span></button></td>"

Intenta llamar la funcion de esta manera.

$(document).on('click', '#table_retentions  td  button'  , function() {
var datamaxapp= $('#get_file').data('maxapp');
var dataidfuncion= $('#get_file').data('idfuncion');

    set_file(datamaxapp,dataidfuncion)  
 
});

Para mas informacion consulta https://api.jquery.com/on/ https://www.w3schools.com/tags/att_data-.asp

Para contactarme y ayudarte http://carloscordova.com/

Codigo completo

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

<script type="text/javascript">
       var maxAppend=0;
    function addRow() {  
          let html = "<tr>" +
            "<td><input class='form-control' type='text' id='datepicker' value='dd/mm/YYYY' size='6'></td>" +
            "<td><input class='form-control' type='text' size='1'/></td>" +
            "<td><textarea class='form-control' rows='2' cols='25'></textarea></td>" +
            "<td><input class='form-control' type='text' size='1'/></td>" +
            "<td><input class='form-control' type='text' size='1'/></td>" +
            "<td><select class='form-control'><option>Entidad</option></select></td>" +
            "<td><select class='form-control'><option>Tipo</option></select></td>" +
            "<td><button type='button' onclick='set_file("+maxAppend+",1)' id='get_file"+maxAppend+"1' class='btn btn-primary onclick'><span class='glyphicon glyphicon-upload' style='float:right;display: inline-block;' aria-hidden='true'></span></button></td>" +
            "<td><input type='file' id='my_file"+maxAppend+"1'> </td>" + 
            "<td><button type='button' onclick='set_file("+maxAppend+",2)' id='get_file"+maxAppend+"2' class='btn btn-primary onclick'><span class='glyphicon glyphicon-upload' style='float:right;display: inline-block;' aria-hidden='true'></span></button></td>" +
            "<td><input type='file' id='my_file"+maxAppend+"2'></td>" +  
            "<td><button type='button' class='btn btn-warning'><span class='fa fa-edit' style='float:right;display: inline-block;' aria-hidden='true'></span></button></td>" +
            "</tr>";
            $("#table_retentions").append(html);
            maxAppend++;
        }
  function set_file(i,j){
     $('#my_file'+i+j).click();
     alert("my_file "+ "  "+i+"  "+j);
  }



  $(document).ready(function() {
     addRow() ;


  });


</script>

<table id="table_retentions"> </table>
7
  • Muchas gracias por tu respuesta Carlos, pero me lanza este error: Uncaught ReferenceError: td is not defined el 26 jul. 2021 a las 14:31
  • el problema es el selector, "td > button" el 26 jul. 2021 a las 14:46
  • Revisa que estas haciendo referencia correctamente hacia el selector . o lo puedes cambiar por una clase. el 26 jul. 2021 a las 14:54
  • probé con y sin la clase, pero no hace nada y no muestra ningún error ni warning el 26 jul. 2021 a las 15:08
  • carloscordova.com mandame mensaje, te ayudo el 26 jul. 2021 a las 15:18

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.