CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
user1941319
user1941319

Reputation: 455

Add event listener to dynamically create table row

I have a table with ajax call to create rows within the tbody element. I have the table created on the html page.

<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

My javascript code to attach the event to second cell of each row in tbody

$('#mytable tbody').on( 'click', 'tr td:eq(2)',  function() {
    console.log($(this).html())
});

This code only works for the second cell of the first row of the tbody. Clicking the second cell of all other rows did not trigger the event. I have to work around this by check the cell index

if (this.cellIndex == 2) console.log($(this).html())

I still want to know how to make the correct selection.

Upvotes: 1

Views: 1833

Answers (2)

chrwahl
chrwahl

Reputation: 13060

You can just have an event listener for the entire table and then test what was clicked. Adding the event listener to the table you don't need to assign it again if the content of the table changes.

Adding a class name can both be useful for the usability (styling the cursor) and easier to find elements using JS.

document.getElementById('mytable').addEventListener('click', e => {
  let td = e.target.closest('td[class="clickable"]');
  if (td) {
    console.log(e.target.innerText, 'was clicked');
  }
});
td.clickable {
  cursor: pointer;
}
<table id='mytable'>
  <thead>
    <tr>
      <th>First Col</th>
      <th>Second Col</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First</td>
      <td class="clickable">Second 1</td>
    </tr>
    <tr>
      <td>First</td>
      <td class="clickable">Second 2</td>
    </tr>
    <tr>
      <td>First</td>
      <td class="clickable">Second 3</td>
    </tr>
    <tr>
      <td>First</td>
      <td class="clickable">Second 4</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

To select the specific td of each row use nth-child() instead of eq():

$('#mytable tbody').on( 'click', 'tr td:nth-child(3)',  function() {
  console.log($(this).html())
});

Upvotes: 1

Related Questions