Jquery-ias breaking clickable row -
i using jquery 2.1.1, , have been using add 'clickable' rows returned 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. have added jquery-ias (2.1.2), , first page of returned results has clickable rows.
my jquery-ias code follows:
<script type="text/javascript"> $(document).ready(function() { // infinite ajax scroll configuration jquery.ias({ container : '.wrap', // main container data goes append item: '.item', // single items pagination: '.nav', // page navigation next: '.nav a', // next page selector negativemargin: 250, }); }); </script>
jquery-ias working fine, pages loading needed, resultant rows not clickable.
inspecting page in chrome shows subsequently loaded rows have not had clickable attribute added.
the relevant row in php this:
<tr class='resultsrow item' <?php echo "data-href='carddetail.php?setabbrv={$row['setcode']}&number={$row['number']}&id={$row[1]}'"; ?>>
all works fine if use either, how them play nicely together?
edit.....
ok, have worked around using 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 page change, waits second page structure load, , applies clickable class.
i can't see working if it's waiting images though... doesn't have instance, there's got better way this.
any pointers?
the better way use rendered
event, 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'); }); }); });
Comments
Post a Comment