选择动态生成的行删除

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"); 
});