显然，我不知道如何将字体真棒元素绑定到克隆的表单。我尝试了所有操作，但是克隆表单上的图像仍保留原始消息。
图像预览已在克隆表单上起作用。之后首先在html上，我在<input type="file"上方添加了带有相机图标的字体真棒元素。其次，在javascript上，我添加了一个触发字体真棒元素的函数，该函数可用于原始消息提交。第三，我创建了iClone()函数，以使用jQuery抓取字体真棒元素后查找，触发和更改字体真棒和输入文件的data-count号。第四，我创建了var cloneCount = 0;变量，该变量最初设置为0，以递增和更改克隆表单的ID名称。第五，我创建了var bindFileChange = function(cloneCount) {变量以将真棒字体和文件输入元素绑定到具有新表单ID名称的新表单。
下一步，在进行实际克隆的回复按钮$("button").click(function(){上，首先cloneCount++;递增cloneCount，即新表单的ID名称。其次，它将克隆表单并向其中添加新的ID名称。第三，它运行iClone函数。最后，它运行bindFileChange(cloneCount);函数。这应该将真棒字体和输入文件都绑定到具有新ID的新表单。但这不起作用。
这是测试用例的链接，在该例中，我尝试在JSBin：https://jsbin.com/cepanet/4/edit?js
上将真棒字体添加到克隆的图像预览中。而且，这是指向功能代码的链接，该功能用于在JSBin上克隆不带字体的图像预览：https://jsbin.com/xexejur/10/edit?html,js,output
$(document).ready(function() {
// Original message. It is not cloned.
$("#form_clone0").click('submit', function() {
let fileInput = $('input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$(this).siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
// Function to activate font awesome
$("i").click(function() {
$("input[type='file']").trigger('click');
});
});
// Function to find, trigger, and change the data-count number of both font
// awesome and input file after grabbing font awesome element using jQuery.
function iClone() {
$("i").click(function() {
$("input[type='file']").first().attr('data-count', cloneCount).trigger('click');
});
};
// Variables to bind font awesome and file input elements to cloned form.
// Including, variable to increment cloned form counter. Set to zero.
var cloneCount = 0;
var bindFileChange = function(cloneCount) {
let fileInput = $('i, span, input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$('i').siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
};
$("button").click(function() {
// Cloned functions for reply message. Actual cloning takes place
// here.
cloneCount++;
$("#form_clone0").clone().attr('id', 'form_clone' + cloneCount).insertAfter("#form_clone" + (cloneCount - 1));
iClone();
bindFileChange(cloneCount);
});
});<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="form_clone0">
<form method="post" enctype="multipart/form-data">
<div>
<img class="image_Preview" width="100" height="100" />
<i class="fa fa-camera"></i>
<input type="file" class="fileUpload" data-count="0" style="display: none;">
</div>
<div>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
<button>Reply</button>
</body>
</html>
答案 0 :(得分：1)
使用标签并将其[for]属性分配给输入ID的值：
<label for='upload'></label>
<input id='upload' type='file'>
单击标签后，与其关联的输入也将显示。
委托自加载页面以来存在的祖先标记上的事件。将表示您要定位的所有适用标记的选择器传递到第二个参数（称为Event.data）。
$('main').on('click change', '.file, .upload, .reply', function(e) {...
如果要克隆的源包含不需要的内容，则克隆会变得很复杂。仅克隆<template>的内容或呈现htmlString可能会更容易。下面的演示针对后者。
有99％的时间最好将所有<script>标记放在</body>结束标记之前（请参见演示的HTML）。
let count = 0;
$('main').on('click change', '.file, .reply, .upload', function(e) {
if ($(this).is('.reply')) {
++count;
const htmlString = `<form id="box${count}" class="input-group form-row" method="post" enctype="multipart/form-data"><label class="input-group-prepend" for="image${count}" style="display:block;min-height:120px"><figure class="input-group-text" style="min-height:100%"><i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i> <img class="preview" width="100" height="100"> <figcaption> </figcaption></figure></label><input id="image${count}" name='image${count}' class="file" type="file" data-count="${count}" style="display: none"><section class="input-group-append" style="max-height: 120px"><fieldset class="btn-group-vertical" style="min-height: 100%"><button class="upload btn btn-primary btn-sm" type="button" style="min-height: 50%" form="box${count}">Upload</button> <button class="reply btn btn-secondary btn-sm" type="button" style="min-height: 50%">Reply</button></fieldset></section></form>`;
$('main')[0].insertAdjacentHTML('beforeend', htmlString);
} else if ($(this).is('.file')) {
$(this).closest('.input-group').find('.preview').attr('src', window.URL.createObjectURL(this.files[0]));
$(this).closest('.input-group').find('figcaption').text(this.value.split(`\\`).pop());
} else if ($(this).is('.upload')) {
$(this).closest('form').submit();
e.stopPropagation();
} else {
return false;
}
});
$('body').tooltip({
selector: '.tip'
});i.tip.btn:hover {
color: #fff;
background: #000;
cursor:pointer;
}<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<main class='container'>
<form id='box' class='input-group form-row' method='post' enctype="multipart/form-data">
<label class='input-group-prepend' for='image' style='display:block;min-height:120px'>
<figure class='input-group-text' style='min-height:100%'>
<i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i>
<img class="preview" width="100" height="100">
<figcaption> </figcaption>
</figure>
</label>
<input id='image' name='image' class="file" type="file" data-count="0" style="display: none;">
<section class=' input-group-append' style='max-height: 120px'>
<fieldset class='btn-group-vertical' style='min-height: 100%'>
<button class='upload btn btn-primary btn-sm' type='button' style='min-height: 50%' form='box'>Upload</button>
<button class='reply btn btn-secondary btn-sm' type='button' style='min-height: 50%'>Reply</button>
</fieldset>
</section>
</form>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
<!--This is where the jQuery/JavaScript would be placed-->
</script>
</body>
</html>