更正jQuery代碼添加新的文件輸入正確

列表項

我有一個使用情況glyphicon：「+」按鈕，點擊會增加新的HTML輸入：文件類型，但在這樣做在兩次輸入之後，不是創建一個新的file_input，而是創建多個。更正jQuery代碼添加新的文件輸入正確

var firstFileInputClone; 
 

 
$(document).ready(function() { 
 
    firstFileInputClone = $(".file-div").last().clone(); 
 
}); 
 

 
function addNewFileInput(){ 
 

 
    var newFileElement = firstFileInputClone; \t 
 
    var index = $(".file-div").length; \t 
 

 
    $(newFileElement).find("input:first").attr("name","file_" + index); 
 
    $(newFileElement).insertAfter($(".file-div")); 
 
    return true; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="file-div row top10"> 
 

 
    <label class="col-md-4 control-label">Upload Attachment</label> 
 
    <div class="col-md-6 inputGroupContainer"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> \t \t \t \t \t 
 
     <input type="file" name="file_0" class="form-control file-input" /> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-plus" onclick="addNewFileInput()"></i></span> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-11-06 user3747396

你在哪裏追加該HTML場？顯示jquery代碼 –

編輯代碼以反映所面臨的問題，運行代碼查看問題 – user3747396

試試這個。

function addNewFileInput(){ 
 

 
\t var firstFileInputClone = ''; 
 
\t var index = $(".file-input").length; \t 
 
\t 
 
\t firstFileInputClone += '<label class="col-md-4 control-label">Upload Attachment</label>'; 
 
\t firstFileInputClone += '<div class="col-md-6 inputGroupContainer">'; 
 
\t firstFileInputClone += '<div class="input-group">'; 
 
\t firstFileInputClone += '<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>'; \t 
 
\t firstFileInputClone += ' <input type="file" name="file_'+index+'" class="form-control file-input" />'; 
 
\t firstFileInputClone += ' <span class="input-group-addon"><i class="glyphicon glyphicon-plus" onclick="addNewFileInput()" ></i></span>'; 
 
\t firstFileInputClone += '</div>'; 
 
\t firstFileInputClone += '</div>'; 
 
\t 
 
\t $('.file-div').append(firstFileInputClone); 
 
\t return true; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="file-div row top10"> 
 

 
    <label class="col-md-4 control-label">Upload Attachment</label> 
 
    <div class="col-md-6 inputGroupContainer"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> \t \t \t \t \t 
 
     <input type="file" name="file_0" class="form-control file-input" /> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-plus" onclick="addNewFileInput()"></i></span> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-11-07 20:28:33

更正jQuery代碼添加新的文件輸入正確

回答

相關問題