jQuery [button.class] 未检测到使用按钮附加行
Appending a row with a button is not detected with jQuery [button.class]
好吧,我基本上有一个 table 由 PHP 为每一行绘制。在该行中,我有数据和一个 "delete" 按钮来删除特定行。
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr class='btnDelete' data-id=" . $row["username"]. "><td>" . $row["id"]. "</td><td>" . $row["username"]. "</td><td><span class='label label-success'>" . $row["active"]. "</span></td><td><button class='btn btn-danger btnDelete btn-xs' href=''>delete</button></td></tr>";
}
}
?>
要删除该行,我有一个脚本可以在单击按钮时使用数据 ID 显示模式,如下所示。
$('button.btnDelete').on('click', function (e) {
e.preventDefault();
var id = $(this).closest('tr').data('id');
$('#myModal').data('id', id).modal('show');
$('#modaltitle').text('User ID: ' + id);
});
但是,问题是:当我使用 jQuery 追加到 table 时,该行会正确显示并添加到数据库中,但删除按钮不会弹出模式删除行。只有刷新页面才会删除
从源代码来看,附加行的代码对我来说没问题。
最后,这是附加行的来源。
$('#btnAdd').click(function () {
var user = $('#user').text();
var newuser = $('#txtUserAdd').val().toLowerCase();
var dataString = 'user='+ user.toLowerCase() + '&user2=' + newuser;
$.ajax({
type: "POST",
url: "../adduser.php",
data: dataString,
cache: false,
success: function(result){
console.log(result);
$('#userlist tr:last').after("<tr class='btnDelete' data-id="+ newuser + "><td>ID</td><td>" +newuser+ "</td><td><span class='label label-success'>Active</span></td><td><button class='btn btn-danger btnDelete btn-xs' href=''>delete</button></td></tr>");
}
});
});
非常感谢您的帮助,如果您需要更多信息,请告诉我。
将按钮事件更改为:
$("#datatable").on("click", "button", function(event){
event.preventDefault();
var id = $(this).closest('tr').data('id');
$('#myModal').data('id', id).modal('show');
$('#modaltitle').text('User ID: ' + id);
});
其中:
<tbody id="datatable">
好吧,我基本上有一个 table 由 PHP 为每一行绘制。在该行中,我有数据和一个 "delete" 按钮来删除特定行。
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr class='btnDelete' data-id=" . $row["username"]. "><td>" . $row["id"]. "</td><td>" . $row["username"]. "</td><td><span class='label label-success'>" . $row["active"]. "</span></td><td><button class='btn btn-danger btnDelete btn-xs' href=''>delete</button></td></tr>";
}
}
?>
要删除该行,我有一个脚本可以在单击按钮时使用数据 ID 显示模式,如下所示。
$('button.btnDelete').on('click', function (e) {
e.preventDefault();
var id = $(this).closest('tr').data('id');
$('#myModal').data('id', id).modal('show');
$('#modaltitle').text('User ID: ' + id);
});
但是,问题是:当我使用 jQuery 追加到 table 时,该行会正确显示并添加到数据库中,但删除按钮不会弹出模式删除行。只有刷新页面才会删除
从源代码来看,附加行的代码对我来说没问题。
最后,这是附加行的来源。
$('#btnAdd').click(function () {
var user = $('#user').text();
var newuser = $('#txtUserAdd').val().toLowerCase();
var dataString = 'user='+ user.toLowerCase() + '&user2=' + newuser;
$.ajax({
type: "POST",
url: "../adduser.php",
data: dataString,
cache: false,
success: function(result){
console.log(result);
$('#userlist tr:last').after("<tr class='btnDelete' data-id="+ newuser + "><td>ID</td><td>" +newuser+ "</td><td><span class='label label-success'>Active</span></td><td><button class='btn btn-danger btnDelete btn-xs' href=''>delete</button></td></tr>");
}
});
});
非常感谢您的帮助,如果您需要更多信息,请告诉我。
将按钮事件更改为:
$("#datatable").on("click", "button", function(event){
event.preventDefault();
var id = $(this).closest('tr').data('id');
$('#myModal').data('id', id).modal('show');
$('#modaltitle').text('User ID: ' + id);
});
其中:
<tbody id="datatable">