JQuery文件上载未检测到动态添加的输入

JQuery file upload not detecting dynamically added inputs

本文关键字：动态 添加 输入 检测 文件 上载 JQuery      更新时间：2023-09-26

我有一个表单，在这个表单中你可以添加1个或多个用户，每个用户必须上传一个img文件。

我有jquery.fileupload库，它对第一次输入很好，但如果用户需要添加更多字段来添加更多用户，那么fileupload jquery代码不会检测到那些动态添加的输入字段。

字段所在位置的HTML代码：

<div class="input text input-nb">
    <!-- DIV where the input fields are adden from jquery -->
    <div id="bloque_integrante_wrap">
    </div>
    <!-- DIV that contains the link to add more input fields -->
    <div id="agregar_mas_wrap">
        <a id="agregar-mas-integrantes-nb" href="javascript:void(0)"><img id="agregar-mas-nb-img" src="../img/agregar-mas.jpg" /> <label id="agregar-mas-nb-2">agregar mas</label></a>
    </div>
</div>

我的js/jquery代码如下：

$(document).ready(function(){
    var index = 1;
    var bloque = '<div class="bloque_integrante">'+
                '<div class="inner_wrap_nb" id="bloque_integrante_'+index+'">'+
                    '<label>Nombre </label><input class="nombre_integrante_nb" name="data[nombre_integrante_'+index+']" type="text" />'+
                    '<label>Rol </label><input class="rol_integrante_nb" name="data[rol_integrante_'+index+']" type="text" />'+
                    '<a class="bonito-button subir-ci-nb fileinput-button">Subir Copia C.I.'+
                    ' <input type="file" name="data[ci_integrante_'+index+']" id="ci_integrante_'+index+'" class="ci_integrante_nb" >  </a>'+
                    '<a class="eliminar-integrante-nb" href="javascript:void(0)"></a>'+
                    '<img class="nb-ci-prev-status" id="preview_nb_'+index+'" src="../img/check-nb.png">'+
                '</div>'+
            '</div>';
   // Adding the default first block, must always have 1 input at start
   $("#bloque_integrante_wrap").append(bloque);
  // The listener to when user clicks to add more fields
  $("#agregar-mas-integrantes-nb").on("click",function(){
   index = index + 1;
    var bloque2 = '<div class="bloque_integrante">'+
                '<div class="inner_wrap_nb" id="bloque_integrante_'+index+'">'+
                    '<label>Nombre </label><input class="nombre_integrante_nb" name="data[nombre_integrante_'+index+']" type="text" />'+
                    '<label>Rol </label><input class="rol_integrante_nb" name="data[rol_integrante_'+index+']" type="text" />'+
                    '<a class="bonito-button subir-ci-nb fileinput-button">Subir Copia C.I.'+
                    ' <input type="file" name="data[ci_integrante_'+index+']" id="ci_integrante_'+index+'" class="ci_integrante_nb" >  </a>'+
                    '<a class="eliminar-integrante-nb" href="javascript:void(0)"></a>'+
                    '<img class="nb-ci-prev-status" id="preview_nb_'+index+'" src="../img/check-nb.png">'+
                '</div>'+
            '</div>';
      $("#bloque_integrante_wrap").append(bloque2);
   });

   // This is where i process when file input is changed (user choses file)
   // This only works for the first input, added as soon as document loads
   $("#subir-imagen-banda-nb").on("change", function(){
         readURL(this,"#foto-nb-icon",30,30);
   });

});

函数readURL将上传文件的URL添加到DOM元素，通常是显示上传文件的拇指图标。

这只适用于我在文档加载后添加的第一个元素。

@dave指出，我应该使用事件委派来检测我动态添加的元素。

因此，为了检测这一点，我的Jquery侦听器如下所示：

   $("#bloque_integrante_wrap").on("change",".ci_integrante_nb",function(){
       var contenedor1 = $(this).attr("id");
       var tmp = contenedor1.split("_");
       var num = tmp[2];
       readURL(this,"#preview_nb_"+num,30,30,"feedback");
   });

请注意我是如何使用#bloque_integrante_wrapdiv选择器的，它是添加动态元素的地方，而.ci_integrante_nb是每个动态元素所具有的类。

相关文章：