Question

嗨，谢谢你花点时间看看我的问题。我有一个页面的一部分，其中内容从另一个文件动态加载到。原因是它需要实时更新。现在我希望能够应用通常用于显示/隐藏内容（幻灯片，淡入淡出等）的jquery效果来动画当前数据和新数据之间的差异。这是用于获取内容并将其加载到div中的代码：

    function k() {
        $.post("../includes/ajaxAgenda.php", {
            limit : value
        }, function(data) {
            $('#tab-agenda').html(data);
        });
    };
        $(document).ready(function() {
        k();
        $('#tab-agenda').scroll(function() {
            loadMore();
        });
    });
    var refreshId = setInterval(function() {
        k();
    }, 1000);

所以我想我的问题是如何为加载的内容设置动画，这样它不会只是从一个内容“弹出”到另一个内容？

编辑：我尝试使用.live而不是.scroll但它似乎不起作用：

$(document).ready(function() {
$('#tab-agenda').live("scroll",function() {
        alert("hi"); 
        loadMore();
    });
});

Answer 1

您需要使用jquery的live函数来绑定动态添加的元素。

参考：http://api.jquery.com/live/

试试这个：

$('#tab-agenda').live("scroll",function() {
            loadMore();
        });

Answer 2

我建议你在内容/ div上添加带有适当css的ajax加载器图像，如下所示。

          function loadmore(){
          $("#loader").css('display','block');
           //your   
           //code 
           //here
           $("#loader").css('display','none');  
          }

         html 
         <img id="loader" src="ajax-loader.gif" style="display:none" />
         <div id="content">
               your cont to display
          </div>

如何在Ajax加载的内容上使用jQuery效果？

2 个答案: