Not every row is clickable - what to do about it?

MKear

I am using jquery and bootstrap 4.1. I have generated a table, that is sortable and searchable using the datatables plugin. I want to make each row clickable and I picked up a solution form stackoverflow that makes this work beautifully but only for the first 49 rows of the table whether or not the table has been resorted - (i.e. you click a column heading to resort the table, it still doesnt make the last row clickable)

Here's the code for a typical table row:

 <tr class="clickable-tr" href="/index.cfm?pid=111601&pgm=201851">
          <td>201851</td>
          <td>21/Dec/2018</td>
          <td>Carolina Blue / I Hear Bluegrass Calling Me / Pinecastle</td>
        </tr>

(the link is valid but i'm not sure if that would make a difference at this page)

Here's the CSS for the clickable-tr class:

<style>
    .clickable-tr{
  cursor: pointer;
}
    </style>  

and here's my jquery to enable the datatables plugin and the clickable row:

$(document).ready(function() {
        $('#results').DataTable( {
            "pageLength": 50        
        } );
                $('.clickable-tr').on('click', function(){
                 var myLink = $(this).attr('href');
                 window.open(myLink);
            });  
        
    } );

The only aspect of this whole thing that is connected with row 49 is that is the last row before the pagination takes you to page 2 but I can't see where I've missed something.

Can anyone else?

( Thanks in advance )

Mike Kear Windsor NSW, Australia

colin

Hi @MKear ,

There's a lot going on there. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

allan

Use a delegated event:

$('table').on('click', '.clickable-tr', function(){

See this FAQ.

Allan

MKear

Thank you Allan. I read up on delegated events and now I've changed my javascript to be as follows:

$(document).on('click', '.clickable-tr', function() {
          var myLink = $(this).attr('href');
          window.open(myLink);
        }); 

and that does the trick. Click anywhere along a row, including rows on pages 2 and 3 etc and a new window will open with the website in the window. Exactly as I wanted. Thanks for your help!!!

Cheers
Mike Kear
Windsor, NSW, Australia.