附加按钮上不调用 JavaScript 事件处理程序

Question

我有一个表格，我可以在其中添加选项并添加新的选项字段。我正在为此使用 JQuery。问题是添加字段的删除按钮不起作用。

这是我的表格:

逻辑

1. 我点击 Add New 按钮，新行将添加 Working
2. 我点击删除它必须删除该行不工作

$(function() {

  //add row for options
  $("#addnewoptinrow").click(function(e) {
    e.preventDefault();
    $('.newrow').append('<div class="row mt-3 newrowadded"><div class="col-md-8"><input name="options[]" type="text" class="form-control" placeholder="Option Name"></div><div class="col-md-2"><input name="optionsprices[]" type="number" class="form-control" placeholder="Price"></div><div class="col-md-2"><button type="button" class="removerow btn btn-danger" id="removerow">Remove</button></div></div>');
  });

  //Remove the row
  $('.removerow').on('click', function(e) {
    e.preventDefault();
    $('.newrowadded').closest("div.row").remove();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-8">
    <input name="options[]" type="text" class="form-control" placeholder="Option Name">
  </div>
  <div class="col-md-2">
    <input name="optionsprices[]" type="number" class="form-control" placeholder="Price">
  </div>
  <div class="col-md-2">
    <button class="addnewqtydiscmsgsave btn btn-primary" id="addnewoptinrow">Add New</button>
  </div>
</div>
<div class="newrow"></div>

知道如何修复删除操作吗？

Answer 1

您的代码中有两个问题:

• 对on() 的调用是missing the "selector" argument ，这意味着以后动态添加的元素将不会有点击事件边界
• 您的删除逻辑需要相对于被点击的按钮执行

尝试在您的 .removerow 点击处理程序中进行以下更改:

/* 
Bind the click handler to all elements dynamically added that match the
.removerow selector 
*/
$('body').on('click','.removerow', function(e){
    e.preventDefault();

    /* 
    Explaination:
    1. from "this" remove button being clicked, 
    2. select the closest ".newrowadded" and, 
    3. remove it 
    */
    $(this).closest(".newrowadded").remove();
});

请参阅下面的代码片段，了解基于您的代码的工作示例:

$(function() {

  //add row for options
  $("#addnewoptinrow").click(function(e) {
    e.preventDefault();
    $('.newrow').append('<div class="row mt-3 newrowadded"><div class="col-md-8"><input name="options[]" type="text" class="form-control" placeholder="Option Name"></div><div class="col-md-2"><input name="optionsprices[]" type="number" class="form-control" placeholder="Price"></div><div class="col-md-2"><button type="button" class="removerow btn btn-danger">Remove</button></div></div>');
  });

  //Remove the row
  $('body').on('click', '.removerow', function(e) {
    e.preventDefault();
    $(this).closest(".newrowadded").remove();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
  <div class="col-md-8">
    <input name="options[]" type="text" class="form-control" placeholder="Option Name">
  </div>
  <div class="col-md-2">
    <input name="optionsprices[]" type="number" class="form-control" placeholder="Price">
  </div>
  <div class="col-md-2">
    <button class="addnewqtydiscmsgsave btn btn-primary" id="addnewoptinrow">Add New</button>
  </div>
</div>
<div class="newrow"></div>