我试图动态操作我的 html 页面中的元素,但我遇到了一个问题。
我曾经能够添加或删除一个元素,但突然间我不能了。
我一定是这里做错了什么……
<div id="multiUploaderTop">
<div><input type="button" value="add more files" id="buttonAddFile1"></div>
<div id="multiUploaderContainer">
<div><input type="file" name="attachment"/></div>
</div>
</div>
上面是我要操作的一段html。
下面是我正在运行的 jquery 脚本。
我究竟做错了什么 ?
<script type="text/javascript">
$(document).ready(function(){
alert("doc ready");
initMultiUpload();
});
function initMultiUpload(){
$("#buttonAddFile1").bind("click", function(){
try{
addNewFileRow();
}catch(exception){
alert(exception.message);
}
});
}
function addNewFileRow(){
try{
alert("adding new file row");
var container = $("#multiUploadContainer");
var div = document.createElement("div");
var fileInput = document.createElement("input");
$(fileInput).attr("type", "file");
$(fileInput).attr("name", "attachment");
$(div).append(fileInput);
$(container).append(div);
}catch(ex){
alsert(ex.message);
}
}
</script>
最佳答案
你有一个拼写错误,multiUploaderContainer
和 multiUploadContainer
var container = $("#multiUploaderContainer");
演示:Fiddle
可以简化为
function addNewFileRow() {
var container = $("#multiUploaderContainer");
var div = $('<div />');
var fileInput = $('<input />', {
type: 'file',
name: 'attachment'
}).appendTo(div);
container.append(div);
}
演示:Fiddle
关于javascript - JQuery 不会动态追加 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19557777/