Javascript JQuery文件上载未检测到动态添加的输入
我有一个表单,在这个表单中你可以添加1个或多个用户,每个用户必须上传一个img文件 我有jquery.fileupload库,它在第一次输入时运行良好,但是如果用户需要添加更多字段来添加更多用户,那么fileupload jquery代码不会检测到那些动态添加的输入字段 字段所在位置的HTML代码:Javascript JQuery文件上载未检测到动态添加的输入,javascript,jquery,html,file-upload,Javascript,Jquery,Html,File Upload,我有一个表单,在这个表单中你可以添加1个或多个用户,每个用户必须上传一个img文件 我有jquery.fileupload库,它在第一次输入时运行良好,但是如果用户需要添加更多字段来添加更多用户,那么fileupload jquery代码不会检测到那些动态添加的输入字段 字段所在位置的HTML代码: <div class="input text input-nb"> <!-- DIV where the input fields are adden from jque
<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);
});
});
$("#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");
});
$(文档).ready(函数(){
var指数=1;
变量bloque=''+
''+
“Nombre”+
“罗尔”+
''+
''+
''+
'';
//添加默认的第一个块时,开始时必须始终有1个输入
$(“#bloque_integrante_wrap”)。追加(bloque);
//当用户单击以添加更多字段时,侦听器将
$(“#agregar mas integrantes nb”)。在(“单击”,函数()上{
指数=指数+1;
变量bloque2=''+
''+
“Nombre”+
“罗尔”+
''+
''+
''+
'';
$(“#bloque_integrante_wrap”)。追加(bloque2);
});
//当文件输入发生更改时(用户选择文件),我将在此处进行处理
//这只适用于第一次输入,文档加载后立即添加
$(“#subir imagen banda nb”)。关于(“更改”,函数(){
readURL(这是“foto nb图标”,30,30);
});
});
函数readURL将上传文件的URL添加到DOM元素,通常是显示上传文件的拇指图标
这只适用于加载文档后添加的第一个元素。正如@dave指出的,我应该使用它来检测动态添加的元素 要检测到这一点,我的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);
});
});
$("#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_wrap
div选择器,这是添加动态元素的地方,而.ci_integrante_nb
是每个动态元素都有的类。看起来您可能需要使用@dave谢谢,这确实起到了作用。Tbh,我以前尝试过,但我使用的是一个div,它也被平日添加为代表团的选择器。我现在使用了一个始终存在的div(#bloque_integrante_wrap)并立即工作!