Jquery-ias breaking clickable row

Question

I am using jQuery 2.1.1, and have been using it to add 'clickable' to rows returned from a database using this:

<script type="text/javascript">
jQuery( function($) {
    $('tbody tr[data-href]').addClass('clickable').click( function() {
    window.location = $(this).attr('data-href');
    });
});
</script>

That has been working fine. I have now added jquery-ias (2.1.2), and only the first page of returned results has clickable rows.

My jquery-ias code is as follows:

<script type="text/javascript">
    $(document).ready(function() {
            // Infinite Ajax Scroll configuration
        jQuery.ias({
            container : '.wrap', // main container where data goes to append
            item: '.item', // single items
            pagination: '.nav', // page navigation
            next: '.nav a', // next page selector
            negativeMargin: 250,
        });
    });
</script>

Jquery-ias is working fine, the pages are loading as needed, but the resultant rows are not clickable.

Inspecting the page in Chrome shows that the subsequently loaded rows have not had the clickable attribute added.

The relevant row in the php is this:

<tr class='resultsrow item' <?php echo "data-href='carddetail.php?setabbrv={$row['setcode']}&number={$row['number']}&id={$row[1]}'"; ?>>

All works fine if I use either, but how do I get them to play nicely together?

EDIT.....

OK, I have worked around it using the jquery-ias built-in pageChange event.

jQuery.ias().on('pageChange', function(pageNum, scrollOffset, url) {
   var delay=1000;
   setTimeout(function(){
   jQuery( function($) {
        $('tbody tr[data-href]').addClass('clickable').click( function() {
        window.location = $(this).attr('data-href');
        });
   });
   },delay); 
});

This way when ias finds a page change, it waits a second for the page structure to load, and then applies the clickable class.

I can't see this working if it's waiting for images though... doesn't have to for this instance, but there's got to be a better way to do this.

Any pointers?

score 0 · Answer 1 · answered Oct 01 '14 at 15:03

the better way would be to use the rendered event, for example:

jQuery.ias().on('rendered', function(item) {
  var $items = jQuery(items);

  $items.each(function() {
    jQuery('tr[data-href]', $this).addClass('clickable').click(function() {
      window.location = $(this).attr('data-href');
    });
  });
});

Jquery-ias breaking clickable row

1 Answers1