jQuery克隆元素不更新目标信息答案

【问题标题】：jQuery cloned element not updating target informationjQuery克隆元素不更新目标信息
【发布时间】：2017-02-02 22:57:06
【问题描述】：

我正在尝试使用添加产品按钮来克隆我的文件上传。这是我的 HTML

<section class="transactionalFormRow">
	<input type="file" name="receipt[]"id="receipt">
	<label for="receipt"><span>UPLOAD SALES RECEIPT*</span></label>
</section>
<a href="#" id="addproduct">Add another Product</a>

我有 jQuery 来定位文件名并显示在标签内。它工作正常，在克隆产品上，它将文本更新回“上传销售收据”。但是，当我选择一个新文件时，它总是会更新原始文件输入的文件名（#receipt）。

getReceiptInfo($('#receipt'));

$("#addproduct").click(function(e){
	e.preventDefault();
	var newelement = $(this).prev(".transactionalFormRow").clone();
  var newID = Math.round(new Date().getTime() + (Math.random() * 100));
	var newfileinput = newelement.find(".file-input").attr("id", "receipt-"+newID);
		newfileinput.siblings("label").find("span").text("UPLOAD SALES RECEIPT*");

	getReceiptInfo($("#"+newfileinput.attr('id')));

	$(this).before(newelement);
})

function getReceiptInfo(element){
	var label	 = element.siblings();

	element.change(function(e){
		var fileName = '';
			fileName = e.target.value.split( '\\' ).pop();
		if( fileName )
				label.find( 'span' ).html(fileName);
			else
				label.innerHTML = labelVal;	
	})
}

【问题讨论】：

您的克隆正在复制 ID。这是一个禁忌
但我已将输入 id 更改为新的。

标签： jquery html

【解决方案1】：

您还必须在此处复制事件一些文档https://api.jquery.com/clone/

var defaultLabel = 'UPLOAD SALES RECEIPT*';

$('#prototype').on('change',setLabel);

$("#addproduct").click(function(e){
	e.preventDefault();
	var newelement = $('#prototype').clone(true),
        newID = Math.round(new Date().getTime() + (Math.random() * 100));
    newelement.removeAttr("id");
    newelement.find('input').val('').attr("id", "receipt-"+newID);
    newelement.find('label').attr("for", "receipt-"+newID).find('span').html(defaultLabel);
	$(this).before(newelement);
});

function setLabel(e){
  var fileName = e.target.value.split( '\\' ).pop();
  $(this).find( 'label span' ).html(fileName ? fileName : defaultLabel);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="prototype" class="transactionalFormRow">
	<input type="file" name="receipt[]" id="receipt">
	<label for="receipt"><span>UPLOAD SALES RECEIPT*</span></label>
</section>
<a href="#" id="addproduct">Add another Product</a>

【讨论】：

【解决方案2】：

我终于通过更改 getReceiptInfo 函数并将新的 for 属性添加到标签使其工作。

function getReceiptInfo(element){
    	$(".file-input").each(function(){
    		$(this).change(function(e){
    			var label	 = $(this).next();
    			var fileName = '';
					fileName = e.target.value.split( '\\' ).pop();
				if( fileName )
					label.find( 'span' ).text(fileName);
				else
					label.text(labelVal);	
    		})
    	})
	}

并将其添加到 $("#addproduct").click

newelement.find(".file-input").next().attr("for", "receipt-"+newID);

【讨论】：

【解决方案3】：

您想要实现的目标非常简单，只需几行代码即可实现。

第一：

可以通过将原型<input> 元素放在其<label>...</label> 中来避免对for 和相应id 的需求。
确保原型输入元素确实有class="file-input"，否则将不起作用。

<label><input type="file" class="file-input" name="receipt[]" /><span>UPLOAD SALES RECEIPT*</span></label>

现在，通过将change 事件的观察委托给document（或一些合适的更接近的容器），原始原型file-input 元素和任何未来的克隆都可以一键获得所需的行为：

$("document").on('change', ".file-input", function(e) {
    $(this).closest((".transactionalFormRow"))
        .find('label span')
        .text(e.target.value.split( '\\' ).pop() || labelVal);
});

有了该委托，克隆过程非常简单：

$("#addproduct").on('click', function(e) {
    e.preventDefault();
    $(this).prev(".transactionalFormRow")
        .clone().insertBefore(this)
        .find("label span").text('UPLOAD SALES RECEIPT*');
});

【讨论】：