jquery - how to write an event handler for a button whose id is generated dynamically?

Question

Background Information

I have a table with a bunch of rows of data. Included in each row is a button that should enable the user to delete the current row. I do no know ahead of time how many rows of data I will end up with. Hence the need for a generic button handler... unless there's another better way.

My table looks like this:

<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>

I need a way to write a jquery function that will capture anytime a "del_tcX" button is clicked and then delete the table row that has the corresponding X value. (tcrowX)

Any suggestions would be appreciated.

`$(document).on('click','.del_tcX',function(){//click handler code here})` — Milind Anantwar, Nov 11 '16 at 13:40
Hook to the class of the button with a delegated event handler, then use `$(this).closest('tr').remove()` — Rory McCrossan, Nov 11 '16 at 13:43
$(document).on('click','.'[id^="del_tc"]',function(){ your function logic }); here '^' is use for id starts with 'del_tc' — PSabuwala, Nov 11 '16 at 13:45
@RoryMcCrossan that worked. can you post as an answer? I will accept — Happydevdays, Nov 11 '16 at 13:46
@Happydevdays: yes. IDs must be unique. also use rory's code in click handler to remove the respective tr — Milind Anantwar, Nov 11 '16 at 13:46
@Happydevdays it's ok, this question is already a duplicate, so I've closed it — Rory McCrossan, Nov 11 '16 at 13:46

Govinda Rajbhar · Answer 1 · 2016-11-11T13:50:59.323

0

You must go with class to handle dynamic click as follow, Because you can not handle dynamic click with ID.

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

edited Nov 11 '16 at 13:50

answered Nov 11 '16 at 13:43

Govinda Rajbhar

2,926
6
37
62

1

"X" doesn't actually exist. i just meant to use it as a place holder. – Happydevdays Nov 11 '16 at 13:44
1

First of all Assign a class to your delete button on which click you want to remove the row and on its click you can remove the current row in witch row your button is exist. To remove current row take a look on this link http://stackoverflow.com/a/2162008/2798643 – Govinda Rajbhar Nov 11 '16 at 13:49

jquery - how to write an event handler for a button whose id is generated dynamically?

1 Answers1