用于添加-删除按钮的 jQuery 不起作用答案

【问题标题】：jQuery for adding-delete button is not working用于添加-删除按钮的 jQuery 不起作用
【发布时间】：2017-05-16 17:42:06
【问题描述】：

对于我的一个客户，我根据需要开发了一个查询表。要输入的数据可能是倍数，我为此设计了动态表格，以便增加或减少行数。表单中的添加按钮工作正常，但删除按钮不起作用。

请查看DEMO，代码如下。

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div><input type="text" class="i"  name="sl[]"><input type="text" class="l"  name="item[]"><input  type="text" class="j"  name="unit[]"><input type="text" class="j"  name="qty[]"/>&nbsp;<a href="#" class="remove_field">X</a></div>');

      //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});
    
$(document).ready(function() {
  $(".datepicker").datepicker({
    dateFormat: 'dd-M-yy'
  });
});

.k input {
  width: 95px;
  margin: 2px;
}
.i {
  width: 40px;
  margin: 3px;
  text-align: center;
}
.l {
  width: 390px;
  margin: 3px;
  text-align: left;
}
.j {
  width: 95px;
  margin: 3px;
  text-align: center;
}
.m {
  padding: 10px;
  margin: 5px;
  font-weight: bold;
  line-height: 25px;
}

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<form method="post" action="xxx/enq.php">
  <label>Name:</label>
  <input type="text" name="com" />
  <label>Required at:</label>
  <input type="text" name="req2" />
  <label>Location:</label>
  <input type="text" name="place" />
  <label>Required Dt:</label>
  <input type="text" name="req1" class="datepicker" />

  <div class="input_fields_wrap">
    <table>
      <tr>
        <td class="i">SL</td>
        <td class="l">ITEM DESCRIPTION</td>
        <td class="j">UNIT</td>
        <td class="j">QTY</td</tr>
    </table>
    <input type="text" class="i" name="sl[]">
    <input type="text" class="l" name="item[]">
    <input type="text" class="j" name="unit[]">
    <input type="text" class="j" name="qty[]">
    <button class="add_field_button">+</button>
  </div>

  <input type="submit" name='submit' onclick="show_confirm()" value="SUBMIT">
  <input type="reset" value="CLEAR">
</form>

我尝试了多种方法并在谷歌上搜索但徒劳无功。

【问题讨论】：

删除按钮在哪里？你的意思是清楚吗？（哦，我明白了，您的意思是在您先添加一个字段之后的右侧）。
请定义“不工作”。
你的代码抛出控制台错误（报告这种事情真的很有用）“$(...).on 不是函数”。您的输入字段选择/包装器似乎有些问题。
现在我已经把你的代码放在了一个sn-p中，你可以很容易地看到错误。您已经包含了 jQuery 两次。删除其中一个，最好是 1.6.2，因为它已经过时了，并且您的代码可以正常工作。以后调试任何 JS 问题时请务必检查控制台首先。
确实，删除键不起作用，好像是键盘瘫痪了？ "寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码。没有明确的问题陈述对其他读者没有用。”“不起作用”不是问题描述，请描述您希望您的代码做什么，以及它做什么。只是正常的交流！

标签： javascript jquery datepicker forms uidatepicker

【解决方案1】：

更改填充字段的“删除”功能的js

$(body).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})

【讨论】：

先生，它没有工作
尝试删除 e.preventdefault();
但是您的代码在 JsFiddle 中运行良好。这里是：jsfiddle.net/4tnzffa7