javascript - jquery javascript 添加/删除按钮

Question

我有一个表单，我想在其中动态添加额外的输入字段。因此，当我单击“添加”按钮时，应该会出现一个新的输入字段，但现在同时带有添加和删除按钮。当我现在单击新输入字段旁边的“添加”按钮时，应该会出现另一个新输入字段等。等等。删除按钮也是如此。到目前为止，一切顺利...不过我的问题是，我无法在单击“添加”后创建新的输入字段...

所以，我的代码如下所示:

<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/

有人可以帮帮我吗？

Answer 1

替换行

$('.add').click(函数(e){

与

$(document).on("点击", ".add", function(e){

这样做的原因是 click() 函数将您的 function(e){} 绑定(bind)到 .add 存在的元素 < strong>在调用 click() 函数时。

on() 方法的工作方式不同。在点击事件中，它还将搜索在引发点击事件时存在的任何.add 元素。

http://jsfiddle.net/1qq40qex/