我已经研究了半天多了,我不知道我错过了什么。我尝试了许多不同的迭代和我能找到的所有其他解决方案。这应该是一个明智的选择。我正在使用 JQueryMobile 1.2 及其依赖项这是 javascript(注意 var counter = 2;
是 在代码上方声明:
$("#btn_addIngredient").click(function () {
if (counter > 10) {
alert("Please limit to 10 ingredients");
return false;
}
var newIngredientTextBox = $(document.createElement('div')).attr("id", 'div_ingredient' + counter);
newIngredientTextBox.after().html('<input type="text" name="ingredient' + counter +
'" id="ingredient' + counter + '" value="#' + counter + '" >');
newIngredientTextBox.appendTo("#allIngredientsDiv");
counter++;
}); //~ $("#btn_addIngredient")
和 html:
<div id="IngredientsTextGroup" data-role="fieldcontain">
<fieldset id="IngredientsFieldset" data-role="controlgroup" data-mini="true">
<div id="allIngredientsDiv">
Ingredients
<div id="div_ingredient1">
<input id="ingredient1" value="#1" type="text">
</div>
<!-- *** Need to add <div_ingredient2, 3 ...> -->
</div>
<a id="btn_addIngredient" href="#" data-role="button" data-inline="true" data-icon="plus"
data-iconpos="left">
Add Ingredient
</a>
<div>
最佳答案
您正在使用 .after()错了..如果你想让元素在你选择的元素之后,那么这样做
newIngredientTextBox.after('<input type="text" name="ingredient' + counter +
'" id="ingredient' + counter + '" value="#' + counter + '" />');
如果你想让它在 div 元素内,那么你可以使用 .append()
newIngredientTextBox.append('<input type="text" name="ingredient' + counter +
'" id="ingredient' + counter + '" value="#' + counter + '" />');
此外,您还需要在将元素添加到 dom 之后追加元素,而不是之前
newIngredientTextBox.appendTo("#allIngredientsDiv").after('<input type="text" name="ingredient' + counter +
'" id="ingredient' + counter + '" value="#' + counter + '" />');
关于javascript - 无法使用 javascript 将新文本框动态添加到 <div> 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13809296/