我有一个表单,我想在其中动态添加额外的输入字段。因此,当我单击“添加”按钮时,应该会出现一个新的输入字段,但现在同时带有添加和删除按钮。当我现在单击新输入字段旁边的“添加”按钮时,应该会出现另一个新输入字段等。等等。删除按钮也是如此。到目前为止,一切顺利...不过我的问题是,我无法在单击“添加”后创建新的输入字段...
所以,我的代码如下所示:
<div id="fields">
<button class="add">Add</button>
<div class="newField">
<div class="check">
<input type="radio" id="field_1" name="correct" required></input>
</div>
<input type="text" id="input_1" required></input>
</div>
</div>
CSS:
#fields {
width:350px
}
.check{
float:left
}
.add, .remove {
float:right
}
最重要的是 javascript:
var InputsWrapper = $("#fields");
var x = InputsWrapper.length;
var FieldCount=1;
$('.add').click(function(e){
FieldCount++;
$(InputsWrapper).append('<div class="newField"><button class="remove">Remove</button><button class="add">Add</button><div class="check"><input type="radio" id="field_'+ FieldCount +'" name="correct"></div><input type="text" id="input_'+ FieldCount +'" /></div></div>');
x++;
return false;
});
$(document).on("click",".remove", function(e){
if( x > 1 ) {
$(this).parent('div').remove();
x--;
}
return false;
});
这是一个DEMO fiddle :http://jsfiddle.net/cwprf03o/
有人可以帮帮我吗?
最佳答案
替换行
$('.add').click(函数(e){
与
$(document).on("点击", ".add", function(e){
这样做的原因是 click()
函数将您的 function(e){}
绑定(bind)到 .add
存在的元素 < strong>在调用 click()
函数时。
on()
方法的工作方式不同。在点击事件中,它还将搜索在引发点击事件时存在的任何.add
元素。
关于javascript - jquery javascript 添加/删除按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27219726/