jQuery Script Triggering Another jQuery Script

I am making use of 2 jQuery scripts in a page which is made up of repeating elements (a gallery of thumbnails basically). The scripts are at the end of the html page in two separate script tags.

The first calls a script making use of the touchTouch plugin which presents the images in a nice overlay and allows you to swipe to navigate.

The second is infinite AJAX scroll which appends more items to the page as you scroll down.

The problem I seem to be having is when the page first loads, the touchTouch script modifies the thumbs present on the page. Then I scroll and the infinite scroll script appends more thumbs, but the newly appended thumbs do not then get modified by the touchTouch script, so do not function as they should when clicked on.

How do I make the touchTouch script run again after the infinite scroll script has added new elements to the page?

Here is a snippet from the end of the html

<script src="assets/touchTouch.jquery.js" type="text/javascript"></script> 
<script>
$(function(){ 
// Initialize the gallery $('#thumbs a').touchTouch(); }); 
</script> 

<script type="text/javascript" src="assets/jquery-ias.min.js"></script> 
<script type="text/javascript">
var ias = $.ias({ 
    container: "#thumbs",
    item: ".thumb", 
    pagination: "#pagination", 
    next: ".next a" 
});
   ias.extension(new IASSpinnerExtension());
   ias.extension(new IASTriggerExtension({offset: 5}));
   ias.extension(new IASNoneLeftExtension({text: 'There are no more pages left to load.'})
); 
</script> 
</body> 
</html>


Source: jquery

Leave a Reply