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エラーがあるようです。

また..コードがDOMReadyイベント内にあることを確認してください。そうでない場合は、ボタンをクリックしても何も起こりません。
以下のjsfiddleはエラーを複製します。、、DOM Ready eventまたはでラップされていない場合、クリックイベントは発生しませんwindow load event。
DOM対応ではありません：http ：//jsfiddle.net/mkqU2/2/

Answer 2

コードを変更する必要はありません。これは正常に機能します。

http://jsfiddle.net/yAMjj/

問題は、テーブルに正しいIDがないことのようです。それが

<table id="officers-table">

Answer 3

試す

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

また

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

Answer 4

この答えは質問の範囲を少し超えていますが、ここでの答えは私を正しい方向に向けていたので、私は何かを返したいと思いました。

これは、ajaxの結果が成功した後に削除するために行ったことの単純なバージョンです。ajaxの結果セクションで$（this）が行を削除しなかったことがわかりました。その時点で、「this」はボタンではなく、ajaxオブジェクトまたはsuccessプロパティのいずれか。

// 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（）？これは機能しますか？