动态表中按钮的 Jquery 单击事件不起作用

Question

我有一个动态生成的表，每行都有一个按钮。该按钮看起来像这样:(不要担心奇怪的 id(如果这不是错误的原因，至少)。这是一个 JavaServer Page (JSP)，按钮的 ID 包含一些有用的内容稍后我可以使用。

<table id="myTableRooms" class="table table-bordered table-hover">
    <thead>
        ... A couple of rows
        <tr><th>buttons</th></tr>
    </thead>
    <tbody>
        ... A couple of rows
        <td>
            <button type="button" class="btn btn-danger btn-sm deleteRoomBtn" id="${room.id} ${i.index}">
            <span class="glyphicon glyphicon-remove-circle"></span>button</button>
        </td>
    </tbody>
</table>

该表的 JavaScript 如下:

$(document).ready(function () {
   var table = $('#myTableRooms').DataTable();
   $(table).on( 'click', 'input', function () {
        table.fnDeleteRow( this );
      });
});

当我将选择器从 input 更改为 tr 时，如 example 所示当我单击一行时，它确实会删除表格的行。我想要的是当我单击行中的按钮时该行消失，所以我认为我需要获得正确的选择器。我尝试了很多东西，包括 .deleteRoomBtn 和 input，但是唉。

这只是选择器正确的情况，还是我的整个设置错误？

Answer 1

大概是这样的？ http://jsfiddle.net/MnT5y/

基本上，当您单击按钮时，您会告诉 jQuery 找到与单击的按钮最近的行，然后将其删除。这是一个简单的代码，对您来说是一个良好的开始。

$('button').on('click', function(){
    $(this).closest('tr').fadeOut('slow', function(){
        $(this).remove();
    });
});