動態表中按鈕的jquery點擊事件不起作用

我有一個動態生成的表格，每行都有一個按鈕。該按鈕如下所示：（不要擔心奇怪的id（如果這不是錯誤的原因，至少）這是一個JavaServer Page（JSP），並且該按鈕的ID包含一些有用的信息後來我纔可以使用動態表中按鈕的jquery點擊事件不起作用

<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它刪除表時的行我點擊一行，我想要的是當我點擊行中的按鈕時該行會消失，所以我假設我需要得到正確的sele構造函數。我嘗試了很多東西，包括.deleteRoomBtn和input，但唉。

這只是一個讓選擇器正確的情況，還是我的整個設置錯誤？

來源

2014-05-02 Sam

fnDeleteRow()想要一個<tr>元素作爲參數。點擊當前代碼中的按鈕時，this將指向單擊的輸入元素。所以，你需要做的是找到按鈕的<tr>元素和發送的：

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

來源

2014-05-02 23:50:55

這與選擇器'button'而不是'input'一起工作！謝謝！ – Sam

儘量選擇更改爲button，而不是input並通過行...

$(document).ready(function() { 
    var table = $('#myTableRooms').DataTable(); 
    $(table).on('click', 'button', function() { 
     var tr = $(this).closest('tr'); 
     table.fnDeleteRow(tr[0]); 
     }); 
});

來源

2014-05-02 23:47:07

這是做合理的事情，但意外的是不工作（也許是因爲一個不同的原因，我我不知道） – Sam

看起來你還需要找到該行並將其傳遞給fnDeleteRow（）。 –

像這樣的事情可能？ http://jsfiddle.net/MnT5y/

基本上，當你點擊按鈕，你告訴jQuery找到最近的一行點擊按鈕，並將其刪除。它是一個簡單的代碼，對你來說是一個很好的開始。

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

來源

2014-05-02 23:50:45 Artamiel

我試過了，就像丹尼爾的回答一樣，這也是有效的。謝謝！ – Sam

動態表中按鈕的jquery點擊事件不起作用

回答

相關問題