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