Question

我有一个输入来上传新文件，也有一个按钮来添加另一个文件而无需重新加载页面以一次上传多个文件。当我第一次单击“添加另一个文件”时，它按预期的那样添加了新字段，因此总计我有两个字段，再次单击后出现问题，我得到4个字段，而不是8个，等等。我希望每次单击仅添加一个字段。代码：

<script type="text/javascript">
    $("#file-new").click(function () {
        $( ".file-item" ).clone(false).appendTo( "#files-container" );
    });
</script>

和往常一样感谢您的帮助！：）

Answer 1

仅克隆具有fileItem类的第一个元素

 $("#file-new").click(function () {
        $( ".file-item:first" ).clone(false).appendTo( "#files-container" );
    });

Answer 2

使用jQuery：

function initiateFiles ()
{
  let 
    $fileNew = $( '#file-new' ),
    $container = $( '#files-container' ),
    $item = $( '<div>', { class: 'file-item' } );    
  
  $fileNew.click( () => {
    
    $item.clone().appendTo( $container );
    
  });
}

initiateFiles();

#files-container
{
  width: 200px;
  height: auto;
  padding: 10px;
  border: 1px dashed #000;
}

.file-item
{
  width: 90%;
  height: 10px;
  border: 1px solid #000;
  margin: 5px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="file-new">New File</button>
<div id="files-container"></div>

仅克隆一个字段，每次点击后追加一次

2 个答案: