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

Question

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

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>

Answer 1

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

不需要保存所有 ID，只需使用一个类和 closest("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>