選擇要刪除的動態生成的行

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