Not every row is clickable - what to do about it?
Not every row is clickable - what to do about it?
MKear
Posts: 2Questions: 1Answers: 0
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
This question has an accepted answers - jump to answer
Answers
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
Use a delegated event:
See this FAQ.
Allan
Thank you Allan. I read up on delegated events and now I've changed my javascript to be as follows:
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.