選擇動態生成的行刪除

Question

嗨，我有一個下表輸出數據行。每行旁邊都有一個刪除按鈕。

  <form> 
      <table id="tblAppendGrid" class="appendGrid"> 
       <thead class="ui-widget-header"> 
       <tbody class="ui-widget-content"> 
       <tr id="tblAppendGrid_Row_1"> 
       <td><input type="text" id="tblAppendGrid_s_1" name="nameCompany" maxlength="100" style="width: 160px;"></td> 
       <td><button id="tblAppendGrid_Delete_1" class="delete ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" value="2" type="text" title="Remove Current Row" tabindex="-1" role="button" aria-disabled="false"></td> 
       <tr id="tblAppendGrid_Row_2"> 
       <td><input type="text" id="tblAppendGrid_s_2" name="nameCompany" maxlength="100" style="width: 160px;"></td> 
       <td><button id="tblAppendGrid_Delete_2" class="delete ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" value="2" type="text" title="Remove Current Row" tabindex="-1" role="button" aria-disabled="false"></td> 
      </tbody> 
      <tfoot class="ui-widget-header"> 
      </table> 
     </form> 

我想讀取一行時，單擊刪除按鈕。在下面的代碼中，我不知道如何選擇按鈕ID旁邊的行號。因爲它不起作用。

 $(document).ready(function() { 

      $("#tblAppendGrid_Delete_").button().click(function() { 

         testing("in delete"); 
        });  
     }); 

我想我需要選擇器像$（「tblAppenDGrid_Delete_2」）。 ... 請讓我知道如何在按鈕單擊上選擇此行，以便我可以將其刪除。 感謝

Answer 1

這裏有兩個問題

元素的ID必須是唯一的，你有一個ID tblAppendGrid_Delete_多個元素，在這種情況下，你可以使用一個類值組全部刪除按鈕，而不是ID屬性。

<button class="tblAppendGrid_Delete_1 delete ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" value="2" type="text" title="Remove Current Row" tabindex="-1" role="button" aria-disabled="false"> 

既然你可能與動感的元素來處理，你需要使用基於事件的委託的事件處理程序

$(document).on('click', ".tblAppendGrid_Delete_", function() { 
    testing("in delete"); 
});