php - jQuery：使用动态添加的按钮删除最接近的按钮

Question

我无法使用动态生成的按钮删除表中的一行。主要问题是“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>

Answer 1

试试这个（在 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.
不在 DOM 内部准备好：http : //jsfiddle.net/mkqU2/2/

Answer 2

There is no need to alter your code, which works fine:

http://jsfiddle.net/yAMjj/

The problem seems to be that your table doesn't have the right ID. Make sure it's

<table id="officers-table">

Answer 3

Try

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

or

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

Answer 4

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

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

Answer 5

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