php jQuery：使用动态添加的按钮删除最近的 <tr>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14520961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: remove the closest <tr> with a dynamically added button
提问by chuckfinley
i am unable to remove a row in table using dynamically generated buttons. The main problem is that the "alert()" does not work. How do i catch the 'click' event?
我无法使用动态生成的按钮删除表格中的一行。主要问题是“alert()”不起作用。我如何捕捉“点击”事件？
jQuery:
jQuery：
$("#officers-table").on('click', '.remove-officer-button', function(e) {
var whichtr = $(this).closest("tr");
alert('worked'); // Alert does not work
whichtr.remove();
});
HTML/PHP (updated the code)
HTML/PHP（更新代码）
<table id="officers-table" class="ui-widget ui-widget-content">
<?php if($num_officers > 0): ?>
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Director</th>
<th>Shareholder</th>
<th>Secretary</th>
<th colspan="2">Options</th>
</tr>
</thead>
<?php endif; ?>
<tbody>
<?php foreach ($officers as $item): ?>
<tr>
<td><?=$item->name?> <?=$item->lastname?></td>
<td><?=$item->is_director?></td>
<td><?=$item->is_shareholder?></td>
<td><?=$item->is_secretary?></td>
<td>Edit</td>
<td><button type="button" value="<?=$item->id?>" class="remove-officer-button">Remove</button></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
回答by Anil
Try this (Works in JSFiddle):
试试这个（在 JSFiddle 中工作）：
$(".remove-officer-button").on('click', function(e) {
var whichtr = $(this).closest("tr");
alert('worked'); // Alert does not work
whichtr.remove();
});
Edit
As everyone said, your code seems to work fine as is. Check this JSFiddle:
Original Code:http://jsfiddle.net/mkqU2/1/
编辑
正如大家所说，您的代码似乎可以正常工作。检查这个JSFiddle：
原始代码：http : //jsfiddle.net/mkqU2/1/
You can use the above code as an alternative, but it sounds like you have some other javascript error causing the script to break.
您可以使用上面的代码作为替代，但听起来您还有其他一些 javascript 错误导致脚本中断。
Also.. Make sure you code is inside the DOM Ready event. If its not, Nothing happens when you click the button.
The below jsfiddle replicates your error, the click event don't fire if not wrapped within the DOM Ready event, or window load event.
Not Inside DOM Ready: http://jsfiddle.net/mkqU2/2/
另外.. 确保您的代码在 DOM Ready 事件中。如果不是，则单击按钮时不会发生任何事情。
下面的 jsfiddle 复制了您的错误，如果没有包含在DOM Ready event, 或 中，则单击事件不会触发window load event。
未在 DOM 内就绪：http: //jsfiddle.net/mkqU2/2/
回答by Roy
There is no need to alter your code, which works fine:
无需更改您的代码，它可以正常工作：
The problem seems to be that your table doesn't have the right ID. Make sure it's
问题似乎是您的表没有正确的 ID。确保它是
<table id="officers-table">
回答by Dipesh Parmar
Try
尝试
$(this).parent('tr').remove();
$(this).parent('tr').remove();
or
或者
$(this).parent().remove();
$(this).parent().remove();
回答by Chris
This answer goes a little beyond the scope of the question but the answers here pointed me in the right direction so i wanted to give something back.
这个答案有点超出了问题的范围，但这里的答案为我指明了正确的方向，所以我想回馈一些东西。
This is a simple version of what I did with it for removal after a successful ajax result, I found $(this) in the ajax result section didn't remove the row, I think at that point it may be that "this" is either the ajax object or the success property and not button.
这是我在成功 ajax 结果后删除它的简单版本，我发现 ajax 结果部分中的 $(this) 没有删除该行，我认为此时可能是“this”是ajax 对象或成功属性而不是按钮。
// My button markup ends up like this with php echoing out the id numbers.
// one button in each row.
<button type="button" id="delete234" value="234">Delete</button>
$('button[id^=\'delete\']').on('click', function() {
if (confirm('Are you sure?')) {
var node = this;
$.ajax({
url: 'http://example.com/somewhere.php?somethingtodelete=' + $(node).val(),
dataType: 'json',
success: function (json) {
if (json['success']) {
$(node).closest('tr').remove();
}
}
});
}
});
回答by Martin
$(whichtr).remove() ? Would this work?
$(whichtr).remove() ? 这行得通吗？
