我使用jquery 1.8.3动态创建元素。但它没有解决这个问题。但它正在开发1.3.2版本。下面是我用过的My Jquery Code。
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'CallBackDiv' + counter);
newTextBoxDiv.after().html('<label>Call Back Date Time #'+ counter + ': </label>'+
'<div class="controls"><input type="text" name="callback' + counter +
'" id="callback' + counter + '" value="" ></div>');
newTextBoxDiv.appendTo("#control-group");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#CallBackDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n CallBack #" + i + " : " + $('#callback' + i).val();
}
alert(msg);
});
});
<div id='control-group'>
<div id="CallBackDiv1">
<label class="control-label" for="input01">
Call Back Date Time #1:</label><div class="controls">
<input type='textbox' id='callback1' ></div>
</div>
</div>
<input type='button' value='+' id='addButton'>
<input type='button' value='-' id='removeButton'>
答案 0 :(得分:2)
创建div
的方式没有任何问题。您的代码存在的问题是您使用 jQuery的 after()
函数。在新创建的元素上调用after()
将返回null
,然后您将调用html()
方法。我建议您阅读有关如何使用after()
功能的信息 - &gt; http://api.jquery.com/after/
答案 1 :(得分:0)
为什么不用普通的js
var newTextBoxDiv = document.createElement('div');
newTextBoxDiv.setAttribute("id", 'CallBackDiv' + counter);
答案 2 :(得分:0)
使用jQuery,您可以动态创建如下元素:
// Create a new div
var newTextBoxDiv = $('<div/>', {
id: 'CallBackDiv' + counter
});
// Append the new element to the DOM
newTextBoxDiv.appendTo("#control-group");
// You can check the console for the 'newTextBoxDiv' id
console.log(newTextBoxDiv.attr('id'));
// Then call the after part
newTextBoxDiv.after().html('...');