jquery JavaScript 添加/删除按钮

jquery javascript add/remove button

本文关键字：删除 按钮 添加 JavaScript jquery      更新时间：2023-09-26

我有一个表单，我动态地想要在其中添加其他输入字段。因此，当我单击"添加"按钮时，应该会出现一个新的输入字段，但现在同时具有添加和删除按钮。当我现在单击新输入字段旁边的"添加"按钮时，会出现另一个新的输入字段 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;
});

这是一个演示小提琴：http://jsfiddle.net/cwprf03o/

有人可以帮助我吗？

替换行

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

跟

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

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

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

http://jsfiddle.net/1qq40qex/

相关文章：