Question

我有动态输入类型文件字段，可以通过点击添加更多来添加更多

我选择了脚本来获取文件名，但它只适用于第一个字段而不适用于其他字段。

那么如何选择所有文件名？

＆＃13;

addNode

＆＃13;

$("#em_add").click( function(){
			var decoration_box = $(".one").html();
			$(".logos").append('<div class="one">'+decoration_box+'</div>');
});

$('.logo').change(function () {
	var filePath=$(this).val(); 
	alert(filePath);
});

＆＃13;

Answer 1

您正在动态添加元素，但是在添加时，您没有将事件处理程序附加到这些新元素。要解决此问题，您可以使用事件委派，方法是将事件附加到父.logos。

$("#em_add").click( function(){
			var decoration_box = $(".one").html();
			$(".logos").append('<div class="one">'+decoration_box+'</div>');
});

$('.logos').on('change', '.logo', function () {
	var filePath=$(this).val(); 
	alert(filePath);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">

  <div class="one">
    <input type="file" name="logo[]" id="logo" class="logo" />
  </div>
  
</div>

Answer 2

参考Jquery .on('change') not firing for dynamically added elements

$("#em_add").click( function(){
			var decoration_box = $(".one").html();
			$(".logos").append('<div class="one">'+decoration_box+'</div>');
});

$('.logos').on('change', 'input:file', function () {
	var filePath=$(this).val(); 
	alert(filePath);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">

  <div class="one">
    <input type="file" name="logo[]" id="logo" class="logo" />
  </div>
  
</div>

使用jQuery / JavaScript在动态输入文件字段中获取选定的文件名

2 个答案: