Why my table tr click function is not calling in jQuery?

Question

I am trying to get the value of table row using jQuery. When I try the same jQuery code on console and after I try to click, that is selecting that row and give proper value what I expect. But I don't know why it is not running from my JavaScript file. But the other functions are working on the same JavaScript file

$(".chequeTable tbody tr").click(function() {
  alert('Vendor ID ==');
  $('.selected').removeClass('selected');
  $(this).addClass("selected");

  alert('Vendor ID ==' + $('.tdVendorID').html());

  $(this).css("background-color", "#000000");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover FilterTable chequeTable table-striped" id="queryTable">
  <thead>
    <tr>
      <th>S.No</th>
      <th>VendorID</th>
      <th>VendorName</th>
      <th>ReqNo</th>
      <th>ChequeAmount</th>
      <th>VendorBalance</th>
      <th>Balance</th>
      <th>Description</th>
      <th>StockValue</th>
      <th>Yes/No</th>
    </tr>
  </thead>
  <tbody>
    <tr class="">
      <td class="tdSno">1</td>
      <td class="tdVendorID">6000 </td>
      <td class="tdVendorName">john</td>
    </tr>
  </tbody>
</table>

Your code works in isolation, so the problem must be due to an error elsewhere in your code base which we can't see. Check the console for errors. — Rory McCrossan, Oct 12 '17 at 07:55
@RoryMcCrossan I checked my console. It doesn't show any error — Liam neesan, Oct 12 '17 at 07:57
Have you put the jQuery code in a document.ready event handler? — Rory McCrossan, Oct 12 '17 at 08:00
Are you trying to do something like this? https://jsfiddle.net/71p93yy8/ — Nick Parsons, Oct 12 '17 at 08:03
The fact that your rows are dynamically generated would have been vital information to put in the OP, although I don't see how this would have ever worked (in external file or not) without a delegated event handler. — Rory McCrossan, Oct 12 '17 at 08:07

cloned · Answer 1 · 2017-10-12T10:42:54.237

3

Most probably the table is not there when you initialize the click event in jquery. Do you build the table dynamically?

Try to bind the click event to the table instead of the tr directly:

$(".chequeTable").on("click", "tr", function() { ... });

This only works when the table.chequeTable is in the HTML.

Some explanation why:
jquery documentation for on()

It says that it binds the events to all the elements in the selector. That means, elements that are not in the selector (any tr that is not yet present for example) won't receive the event. For that you have to bind the click Event on a container and check what the clicked subelement is. This is more perfomant anyways because you only attach one click Event and not 100s (if you have 100s tr-Elements)

edited Oct 12 '17 at 10:42

answered Oct 12 '17 at 07:56

cloned

4,562
3
18
31

yes, when I load the page, that table doesn't have any row. I am adding row dynamically – Liam neesan Oct 12 '17 at 07:59
Yes you are correct. your code is working. Can you tell my why it doesn't work with my jquery code?. It will not work If I add row dynamically? – Liam neesan Oct 12 '17 at 08:01
I edited my answer to explain it a little bit. Hope it helps :) – cloned Oct 12 '17 at 10:43

score 0 · Answer 2 · answered Oct 12 '17 at 08:02

Here you go with a solution

$("table.chequeTable").on('click', 'tr', function() {
  alert('Vendor ID ==');
  $('.selected').removeClass('selected');
  $(this).addClass("selected");

  alert('Vendor ID ==' + $('.tdVendorID').html());

  $(this).css("background-color", "#000000");
});

$('tbody').append(`<tr class="">
      <td class="tdSno">1</td>
      <td class="tdVendorID">6000 </td>
      <td class="tdVendorName">john</td>
    </tr>`);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover FilterTable chequeTable table-striped" id="queryTable">
  <thead>
    <tr>
      <th>S.No</th>
      <th>VendorID</th>
      <th>VendorName</th>
      <th>ReqNo</th>
      <th>ChequeAmount</th>
      <th>VendorBalance</th>
      <th>Balance</th>
      <th>Description</th>
      <th>StockValue</th>
      <th>Yes/No</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

You need to do event delegation as your row are generated dynamically.

Reference Documentation: Event delegation

Hope this will help you.

Why my table tr click function is not calling in jQuery?

2 Answers2