jquery - 如何爲其ID是動態生成的按鈕編寫事件處理程序？

Question

背景信息

我有一組數據行的表。每行都包含一個按鈕，可讓用戶刪除當前行。 我不知道會提前多少行數據。因此需要一個通用的按鈕處理程序......除非有另一種更好的方法。

我的表看起來像這樣：

<table class="table table-bordered table-hover tcdata"> 
    <tbody> 
    <tr> 
     <td colspan="6"> 
     <h3>Time Conditions</h3></td> 
    </tr> 

    <tr id="tcrow0"> 
     <td> 
     <button id="del_tc0" type="button" class="btn btn-warning btn-circle deletename"><i class="fa fa-times"></i></button>&nbsp;&nbsp;TC 1:</td> 
     <td> 
     <input class="form-control starttc tcdata" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime0" id="starttime0" value="00:00:00"> 
     </td> 
     <td> 
     <input class="form-control starttc tcdata" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime0" id="endtime0" value="00:00:00"> 
     </td> 
     <td> 
     <input class="form-control starttc tcdata" type="input" placeholder="Extension" name="extension0" id="endtime0" value="101"> 
     </td> 
     <td> 
     <input class="form-control starttc tcdata" type="input" placeholder="Domain" name="domain0" id="endtime0" value="testdomain"> 
     </td> 
     <td> 
     <input class="dow" id="hidden_dow0" type="hidden" value="m,t,w,r,f,s,n"> 
     <label class="checkbox-inline"><b>Days of Week:</b></label> 
     <input class="checkbox-inline tcdata" type="checkbox" id="dow_m0" name="dow_m0">Mon&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" id="dow_t0" name="dow_t0">Tue&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" id="dow_w0" name="dow_w0">Wed&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" id="dow_r0" name="dow_r0">Thu&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" id="dow_f0" name="dow_f0">Fri&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" id="dow_s0" name="dow_s0">Sat&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" id="dow_n0" name="dow_n0">Sun&nbsp;</td> 
    </tr> 
    <tr> 
     <td> 
     <button id="addtc" type="button" class="btn btn-success btn-circle"><i class="fa fa-plus"></i></button> 
     </td> 
    </tr> 
    <tr id="submitbtnsection"> 
     <td colspan="6" align="center"> 
     <input type="submit" name="submit" id="submit" class="btn btn-primary" value="Save">&nbsp;&nbsp; 
     <input type="button" name="cancel" id="cancel" class="btn btn-warning submit" value="Cancel">&nbsp;&nbsp; 
     <input type="button" name="unassign" id="unassign" class="btn btn-warning" value="Unassign"> 
     </td> 
    </tr> 

    </tbody> 
</table> 

我需要一種方法來寫一個jQuery函數，將捕獲任何時候點擊了「del_tcX」按鈕，然後刪除具有相應的X值的錶行。 （tcrowX）

任何建議，將不勝感激。

Answer 1

您必須按照以下步驟處理動態點擊，因爲您無法處理帶有ID的動態點擊。

$(document).on('click', '.del_tcX', function() { 
    // do something 
    //To remove current row 
    $(this).closest('tr').remove() 
});