时间戳

首页 > 解决方案 > 动态创建的删除按钮在 jquery 中不起作用并停止立即传播

html - 动态创建的删除按钮在 jquery 中不起作用并停止立即传播

问题描述

我根据需要开发了一个查询表。要输入的数据可能是倍数，我为此设计了动态表格，以便增加或减少行数。它们采用表格形式，表单中的添加按钮工作正常，但删除按钮不起作用，并且在调试时显示它停止了立即传播。

var maxcounter = 10;
var passengercounter = 0;
$('#addpassenger').on('click', function(e) {
  if ($("#pname_").val() != "" && 
      $("#pemail_").val() != "" && 
      $("#pnumber_").val() != "") {
  if (passengercounter < maxcounter) {
    passengercounter++;
    var tableinnerhtml = $("#passenger_detail_table").html();
    var name = $("#pname_").val();
    var email = $("#pemail_").val();
    var number = $("#pnumber_").val();

    var newrowhtml = '<tr id="row_' + passengercounter + '">' +
      '<td><input id="pname_' + passengercounter + '"></td>' +
      '<td><input id="pemail_' + passengercounter + '"></td>' +
      '<td><input id="pnumber_' + passengercounter + '"></td>' +
      '<td> <button type="button" id="removepassengerid" class="removepassenger" data-id="'+passengercounter+'" style="background-color:red; color: white;" name="passenger_remove">Remove</button></td>'+
    '</tr>';

    $("#passenger_detail_table").append(newrowhtml);

    $("#pname_" + passengercounter).val(name);
    $("#pemail_" + passengercounter).val(email);
    $("#pnumber_" + passengercounter).val(number);
    $("#pname_" + passengercounter).attr('disabled', 'disabled');
    $("#pemail_" + passengercounter).attr('disabled', 'disabled');
    $("#pnumber_" + passengercounter).attr('disabled', 'disabled');
    $("#pname_").val("");
    $("#pemail_").val("");
    $("#pnumber_").val("");
  } else {
    alert("no more data to be placed")
  }
} else {
  alert("please enter the values...");
}
});

$("document").on('click', '#removepassenger', function() {
  alert("delete button clicked");
  var id = $('#removepassengerid').data('id');
  $("#row_" + id).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="passenger_detail_table" class="table">
  <thead>
    <tr valign="top">
      <td>
        <label for="pname_" id="small-label">Name</label>
      </td>
      <td>
        <label for="pemail_" id="small-label">E-mail</label>
      </td>
      <td>
        <label for="pnumber_" id="small-label">Phone-Number</label>
      </td>
      <td>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input id="pname_" type="text" name="passenger_name[]" value="" placeholder="Enter Name" required>
      </td>
      <td>
        <input id="pemail_" type="email" name="passenger_email[]" value="" placeholder="Enter E-mail" required>
      </td>
      <td>
        <input id="pnumber_" type="number" name="passenger_phone_number[]" value="" placeholder="Enter Phone-No" required>
      </td>
      <td>
        <button type="button" id="addpassenger" name="passenger_add" style="background-color:green;color:white;">Add</button>
      </td>

    </tr>
  </tbody>
</table>

标签： htmljquery

解决方案

ID 必须是唯一的，并且您不断向按钮添加相同的 ID。

无需保存所有 ID，只需使用一个类和最接近（“tr”）

$("#passenger_detail_table").on('click', '.passenger_remove', function() {
  $(this).closest("tr").remove();
});

使用

<button type="button" class="passenger_remove">Remove</button>


var maxcounter = 10;
var passengercounter = 0;
$('#addpassenger').on('click', function(e) {
  if ($("#pname_").val() != "" && 
      $("#pemail_").val() != "" && 
      $("#pnumber_").val() != "") {
  if (passengercounter < maxcounter) {
    passengercounter++;
    var tableinnerhtml = $("#passenger_detail_table").html();
    var name = $("#pname_").val();
    var email = $("#pemail_").val();
    var number = $("#pnumber_").val();

    var newrowhtml = '<tr id="row_' + passengercounter + '">' +
      '<td><input id="pname_' + passengercounter + '"></td>' +
      '<td><input id="pemail_' + passengercounter + '"></td>' +
      '<td><input id="pnumber_' + passengercounter + '"></td>' +
      '<td> <button type="button" style="background-color:red; color:white;" class="passenger_remove">Remove</button></td>'+
    '</tr>';

    $("#passenger_detail_table").append(newrowhtml);

    $("#pname_" + passengercounter).val(name);
    $("#pemail_" + passengercounter).val(email);
    $("#pnumber_" + passengercounter).val(number);
    $("#pname_" + passengercounter).attr('disabled', 'disabled');
    $("#pemail_" + passengercounter).attr('disabled', 'disabled');
    $("#pnumber_" + passengercounter).attr('disabled', 'disabled');
    $("#pname_").val("");
    $("#pemail_").val("");
    $("#pnumber_").val("");
  } else {
    alert("no more data to be placed")
  }
} else {
  alert("please enter the values...");
}
});

$("#passenger_detail_table").on('click', '.passenger_remove', function() {
  $(this).closest("tr").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="passenger_detail_table" class="table">
  <thead>
    <tr valign="top">
      <td>
        <label for="pname_" id="small-label">Name</label>
      </td>
      <td>
        <label for="pemail_" id="small-label">E-mail</label>
      </td>
      <td>
        <label for="pnumber_" id="small-label">Phone-Number</label>
      </td>
      <td>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input id="pname_" type="text" name="passenger_name[]" value="" placeholder="Enter Name" required>
      </td>
      <td>
        <input id="pemail_" type="email" name="passenger_email[]" value="" placeholder="Enter E-mail" required>
      </td>
      <td>
        <input id="pnumber_" type="number" name="passenger_phone_number[]" value="" placeholder="Enter Phone-No" required>
      </td>
      <td>
        <button type="button" id="addpassenger" name="passenger_add" style="background-color:green;color:white;">Add</button>
      </td>

    </tr>
  </tbody>
</table>

为什么不克隆？

const maxCounter = 10;
const $tb = $("#passenger_detail_table tbody ");
let passengerCounter;
$('#addpassenger').on('click', function(e) {
  const pname   = $.trim($("#pname_").val())
  const pemail  = $.trim($("#pemail_").val())
  const pnumber = $.trim($("#pnumber_").val())
  if (pname === "" || pemail === "" || pnumber  === "") { 
    alert("Please enter  values...");   
    return;
  }
  passengerCounter = $tb.find("tr").length
  if (passengerCounter >= maxCounter) {
    alert("No more data to be placed")
    return;
  }

  const $firstRow = $tb.find(">:first-child");
  let $newrowhtml = $firstRow.clone(true);
  $firstRow.find(":input").val("");
  
  $newrowhtml.find(":input")
    .removeAttr("id","")
    .attr('disabled', 'disabled');
    
  $newrowhtml.find("[name*=_name]").val(pname);   
  $newrowhtml.find("[name*=_email]").val(pemail);   
  $newrowhtml.find("[name*=_number]").val(pnumber);   
  $newrowhtml.find("[name=passenger_add]").replaceWith($('<button type="button" style="background-color:red; color:white;" class="passenger_remove">Remove</button>'));

  $("#passenger_detail_table").append($newrowhtml);

});

$("#passenger_detail_table").on('click', '.passenger_remove', function() {
  $(this).closest("tr").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="passenger_detail_table" class="table">
  <thead>
    <tr valign="top">
      <td>
        <label for="pname_" id="small-label">Name</label>
      </td>
      <td>
        <label for="pemail_" id="small-label">E-mail</label>
      </td>
      <td>
        <label for="pnumber_" id="small-label">Phone-Number</label>
      </td>
      <td>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input id="pname_" type="text" name="passenger_name[]" value="" placeholder="Enter Name" required>
      </td>
      <td>
        <input id="pemail_" type="email" name="passenger_email[]" value="" placeholder="Enter E-mail" required>
      </td>
      <td>
        <input id="pnumber_" type="number" name="passenger_phone_number[]" value="" placeholder="Enter Phone-No" required>
      </td>
      <td>
        <button type="button" id="addpassenger" name="passenger_add" style="background-color:green;color:white;">Add</button>
      </td>

    </tr>
  </tbody>
</table>

推荐阅读