jquery - 如何选择动态添加的元素

Question

http://lifeto.cafe24.com/xe/request#

如果您转到此页面，我使用了以下代码以便在滚动页面时提供“淡入淡出”效果。我已经通过使用 jquery addclass 和 animate.css 做到了这一点

( https://daneden.github.io/animate.css/ )

同时我使用 jscroll.js 给它无限滚动效果。

jQuery(document).ready(function() {
    jQuery('tr').waypoint(function() {
        jQuery('tr').addClass('animated fadeIn');
    }, {
        offset: '75%'
    });});

这是我用于无限滚动的脚本

/* infinite scroll */
jQuery(document).ready(function(){
    jQuery('.board_content').jscroll({
        loadingHtml: '<center><img src="layouts/window/ajax-loader.gif" alt="Loading" /> Loading...</center>',
        padding: 0,
        contentSelector: '.board_list',
        autoTriggerUntil: 5,
        nextSelector:'.next_button'
    }); 
});

如您所见，前 10 个是可见的，因为 addclass 工作正常。

但在接下来的 20 秒内保持不透明度:0，因为它们稍后会由 jscroll.js 动态添加到 dom

谁能告诉我如何解决这个问题？

谢谢。

Answer 1

您需要在添加内容后运行 waypoint 脚本来绑定(bind)它们。

类似于:

$('.infinite-scroll').jscroll({
    loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
    padding: 20,
    nextSelector: 'a.jscroll-next:last',
    contentSelector: 'li',
    callback: function() {
       jQuery('tr').waypoint(function() {
          jQuery('tr').addClass('animated fadeIn');
          }, {
             offset: '75%'
       });
    }
});