逻辑

Question

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

这是我的表格：

逻辑

我点击Add New按钮，新行将添加工作
我点击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" 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>

Answer 2

问题在于您的代码仅在页面加载时执行，并且此时尚未创建“删除”按钮。创建删除按钮后，您需要在上向删除按钮添加事件监听器。

Answer 3

为使事件侦听器与以后创建的元素匹配，您需要委派它。在较旧的JQuery版本中，它是通过.delegate方法完成的，但是在最近的版本中，不建议使用此方法。现在您可以通过ancestorCollection.on('query-selector', 'event', listener)进行委派了。

在您的示例中，

$('.newrow').on('.removerow', 'click', function(e){ /*...*/ })

Answer 4

问题是您试图绑定尚未创建的元素上的动作-您应使用如下更一般的绑定：

$(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" class="removerow">Remove</button></div></div>');
    });

    //Remove the row
    $(document).on('click','.removerow', function(e){
        e.preventDefault();
        $(this).parent().parent().remove();
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.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>

请注意

$(document).on('click','.removerow', function(e){

代码行。此行将操作附加到当前和将来的所有“ .removerow”元素。因此，在向此类添加新元素时，会自动为它们分配此操作（顺便说一句，必须将HTML从id="removerow"更改为class="removerow"，以避免重复的ID）。

请阅读this topic，它会详细介绍您的问题。

Answer 5

Button.removerow稍后添加。您可以尝试以下方法：

  //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();
    });
  });

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

逻辑

5 个答案: