Jquery click handler not working in a table

Question

I am using a Jquery plugin called Jquery Content Panel Switcher. It does exactly what the title says, it switches out divs with ease. The html for the page is:

<!--The switcher buttons, basic anchor tags, with the switcher class -->
<a id="content1" class="switcher">One</a>
<a id="content2" class="switcher">Two</a>

<!-- The panel you wish to use to display the content -->
<div id="switcher-panel"></div>

<!-- The actual content you want to switch in and out of the panel, this is hidden -->
<div id="content1-content" class="switcher-content show"></div>
<div id="content2-content" class="switcher-content show"></div>

In each of my content panels I have a form. In each form there is a table:

<table class="table table-hover" data-controller="rank">
  <thead>
    <tr>
      <th colspan="4" align="left"><h2>Rank 1</h2></th>
    </tr>
    <tr>
      <th>Number</th>
      <th>Requirements</th>
    </tr>
  </thead>
  <tbody>
    <tr data-name="one_li">
      <td>1</td>
      <td>Info</td>
    </tr>
    <tr data-name="two_li">
      <td>2</td>
      <td>More Info</td>
      </td>
    </tr>
  </tbody>
</table>

I am trying to fire off an action if a row gets clicked. Here is the javascript I am using:

$(document).ready(function(){
  $('#switcher-panel form table tbody tr').click(function(){
     console.log("Clicked");
   });
});

When I use the Jquery selector of $('#switcher-panel form table tbody tr') in my Chrome console, it finds the table and everything looks fine. When I put it in my javascript file, nothing happens. Some direction would be great. Thanks for the help.

Cerbrus · Accepted Answer · 2012-11-22T14:43:41.900

14

This will work:

$('#switcher-panel').on('click', 'table tr', function() {
    console.log("Clicked", this);
});

Example

This adds a listener to the #switcher-panel that listens for click events on it's children, if the clicked child falls under the 'table tr' selector.

Check out this artice for more info about event delegation. ^{(Ctrl+f for Event delegation)}

edited Nov 22 '12 at 14:43

answered Nov 22 '12 at 14:37

Cerbrus

70,800
18
132
147

2

This didn't work for me but I removed "table " so the second argument is simply "tr" and that worked. – Keavon Jan 03 '15 at 07:59
This is the best solution out of existing. – Ank_247shbm Apr 10 '22 at 05:25

score 3 · Answer 2 · answered Nov 22 '12 at 14:35

If the content of the panel is dynamically appended you would need to delegate the click event to a static parent element. Try this:

$('#switcher-panel').on('click', 'form table tbody tr', function(){
    console.log("Clicked");
});

My guess would be you could shorten the child selector to table tr as well.

Jquery click handler not working in a table

2 Answers2