CODEWITHSUNDEEP
javascriptphpjquerymysqldatatable
Morgan Green
Morgan Green

Reputation: 996

Datatable link stops working after page one

I have a datatable with a data-href inside to create a link to a forum page, My issue lies in the place that my datatable link works great on page one, but when I go to page two I can no longer follow the link,but it still has all the data of a link when I inspect element. My JS and Style for the link within the datatable

<style>
        tr.clickable-row { cursor: pointer; }
        tr.clickable-row:hover { background-color:#F0F8FF;}
        </style>
        <script>
        jQuery(document).ready(function($) {
    $(".clickable-row").on('click',$('.clickable-row'),function() {
        window.document.location = $(this).data("href");
    });
});
</script>

All rows are called upon by MySQL tables to populate the data and are pulled correctly.

echo "<tr class='clickable-row' data-href='viewPage.php?id=".inv_forum_page()."&forum=".$forum['id']."'>
    <td>".$authorname."</td><td>".$posttype."".$forum['subject']."</td><td>".$forum['replies']."</td><td>".$forum['views']."</td>
    </tr>";

I don't feel like posting the entire function as it's quite a bit of code when I don't believe it's the issue since it works on page one I believe it has to do with my Jquery, but if you want to look at the function itself it is on github under https://github.com/Doxramos/Invontrol/blob/master/plugins/inv_forum/functions.php line 75-123 I read on delegated events and I believe that that's scripted correctly, s I'm not sure what the issue is at this point.

Upvotes: 2

Views: 1006

Answers (2)

Nishit Maheta
Nishit Maheta

Reputation: 6031

use below code

your problem is called Event Delegation.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

<script>
    jQuery(document).ready(function($) {
       $(document).on('click','.clickable-row',function() {
          window.document.location = $(this).data("href");
       });
    });
</script>

if you call click event every time new page call use below code.

<script>
    jQuery(document).ready(function($) {
       $(document).off('click').on('click','.clickable-row',function() {
          window.document.location = $(this).data("href");
       });
    });
</script>

Upvotes: 4

Domain
Domain

Reputation: 11808

You have given class 'clickable-row' to tr. Instead of tr class name, try jQuery 'on' method on table class name. For example, assing class 'clickable-tbl' to table tag and modify jQuery code as follows:

$(".clickable-tbl").on('click',$('.clickable-row'),function() {
        window.document.location = $(this).data("href");
    });

Upvotes: 0

Related Questions