Question

我在一个由重复元素组成的页面中使用了2个jQuery脚本（基本上是缩略图库）。脚本位于html页面的两个单独的脚本标记的末尾。

第一个调用脚本使用touchTouch插件，该插件以漂亮的叠加方式显示图像，并允许您滑动以进行导航。

第二个是无限的AJAX滚动，当您向下滚动时，它会向页面添加更多项目。

我似乎遇到的问题是首次加载页面时，touchTouch脚本会修改页面上的大拇指。然后我滚动并且无限滚动脚本附加了更多的拇指，但是新添加的拇指不会被touchTouch脚本修改，因此在单击时不能正常工作。

在无限滚动脚本向页面添加新元素后，如何让touchTouch脚本再次运行？

这是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>

Answer 1

使用无限的AJAX滚动插件，可以让它在加载图像后运行回调函数。在此函数中，您可以再次调用.touchTouch（）方法。

ias.on('rendered', function(items) {
  $('#thumbs a').touchTouch();
});

jQuery脚本触发另一个jQuery脚本

1 个答案: