Question

我有一个表单，我动态地想要添加其他输入字段。因此，当我单击“添加”按钮时，应该会出现一个新的输入字段，但现在同时添加了一个添加和删除按钮。当我现在单击新输入字段旁边的“添加”按钮时，会出现另一个新的输入字段et。删除按钮也是如此。到目前为止，这么好......我的问题是，在点击“添加”后我无法创建新的输入字段......

所以，我的代码看起来像这样：

<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 小提琴：http://jsfiddle.net/cwprf03o/

有人能帮助我吗？

Answer 1

替换行

$('.add').click(function(e){

与

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

原因是click()函数会在调用function(e){}函数时将您的.add绑定到click()元素

on()方法的工作方式不同。在点击事件中，它还会搜索在点击事件被提升时存在的任何.add项。

http://jsfiddle.net/1qq40qex/

jquery javascript添加/删除按钮

1 个答案: