jQuery：使用动态添加的按钮删除最近的 <tr>答案

【问题标题】：jQuery: remove the closest <tr> with a dynamically added buttonjQuery：使用动态添加的按钮删除最近的 <tr>
【发布时间】：2013-01-09 08:48:29
【问题描述】：

我无法使用动态生成的按钮删除表格中的一行。主要问题是“alert()”不起作用。如何捕捉“点击”事件？

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（更新代码）

<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>

【问题讨论】：

您可能遇到了错误。检查你的 JS 控制台。
控制台没有显示任何错误
click 事件是否会触发？
$("#officers-table") 可能为空。你确定你有一个具有该 ID 的元素吗？
检查你的表是否真的有id="officers-table"属性

标签： php jquery html button onclick

【解决方案1】：

$(whichtr).remove() ？这行得通吗？

【讨论】：

whichtr 已经是一个 jQuery 对象.. 不需要在 $ 中再次传递它
这不是重点。警报不起作用，因此我没有捕捉到我的点击事件。我不应该使用“this”——我想我必须改用 e.target。

【解决方案2】：

试试这个（Works in JSFiddle）：

$(".remove-officer-button").on('click', function(e) {
    var whichtr = $(this).closest("tr");
    alert('worked'); // Alert does not work
    whichtr.remove();      
});

编辑
正如大家所说，您的代码似乎可以正常工作。检查此 JSFiddle：
原始代码： http://jsfiddle.net/mkqU2/1/

您可以使用上面的代码作为替代，但听起来您有一些其他 javascript 错误导致脚本中断。

另外.. 确保您的代码位于 DOM Ready 事件中。如果不是，单击按钮时不会发生任何事情。
下面的 jsfiddle 复制了您的错误，如果未包含在 DOM Ready event 或 window load event 中，则不会触发 click 事件。
不在 DOM 内部准备就绪：http://jsfiddle.net/mkqU2/2/

【讨论】：

这与问题中的代码不同，它没有被破坏。
function(e) 您可以删除“e”，因为我们没有在此代码中使用它，或者如果我们不打算使用它。 :)

【解决方案3】：

无需修改代码，效果很好：

http://jsfiddle.net/yAMjj/

问题似乎是您的表没有正确的 ID。确保它是

<table id="officers-table">

【讨论】：

【解决方案4】：

试试

$(this).parent('tr').remove();

或

$(this).parent().remove();

【讨论】：

【解决方案5】：

这个答案有点超出了问题的范围，但这里的答案为我指明了正确的方向，所以我想回馈一些东西。

这是我在成功的 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();
       }
     }
   });
  }
});

【讨论】：