Question

我很抱歉。这是我的问题的后续跟进： Why I can't get this jquery code to work?

所有的解决方案实际上都是我的错误，而不是很好地解释它。

我发现这个代码在点击时会加载更多帖子：

// load more
$(".loadmore").click(function(){
    if ($.cookie('n_more')) {
        count = $.cookie('n_more');
        count++;
        $.cookie('n_more', count, { path: '/', expires: 100 });
    } else {
        $.cookie('n_more', 1, { path: '/', expires: 100 });
    }
    $(".QueryElement").trigger('change');
    var posts_visible = <?php echo $news['num_per_page']; ?>;
    var posts_more = <?php echo $news['num_per_more']; ?>;
    var newposition = posts_visible + (posts_more * $.cookie('n_more'));
    var lastpos = newposition;
    var thispost = $("#post-" + lastpos).position();
    $('html,body').animate({
        scrollTop: thispost.top
    },1000);
});

该代码对我来说很好，因为它调用.QueryElement更改触发器并且更改触发器包含：

    $(".QueryElement").change(function() {

    // i hide almost all code here i think they are not related to the issue
    $("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + $.cookie('nw-query'));

    });

逻辑是我试图在用户点击加载更多帖子时触发更改，这很好并且新帖子被加载，完美。

但是滚动动画不起作用，我认为因为load（）内容同时发生并且动画滚动无法识别正在加载的新帖子ID？我不确定..

但我真的想知道如何初始化动画onclick并且还保证load（）函数完成。我不知道该怎么办。

编辑：是的，如果我在load（）之前将位置设置为可见的DIV / ID，但在新内容加载到页面并插入新的div时无法滚动它。

这适用于例如var lastpos = newposition - 1;，因为我将其设置为一个div（在通过加载更多内容之前）

Answer 1

在change(...)函数中，我将利用$.load完整参数并在那里执行滚动。实际上，在.trigger.可以驻留在该回调中之后，几乎所有内容都会出现。

<强> EDITv2

使用您发布的代码，这是更改。我已将所有内容从触发器移动到加载完成事件。在不知道代码中发生的其他事情的情况下，据我所知，这应该可行。

// load more
$(".loadmore").click(function(){
  if ($.cookie('n_more')) {
    count = $.cookie('n_more');
    count++;
    $.cookie('n_more', count, { path: '/', expires: 100 });
  } else {
    $.cookie('n_more', 1, { path: '/', expires: 100 });
  }
  $(".QueryElement").trigger('change');
});

$(".QueryElement").change(function() {
  // i hide almost all code here i think they are not related to the issue
  $("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + $.cookie('nw-query'),function(){
    var posts_visible = <?php echo $news['num_per_page']; ?>;
    var posts_more = <?php echo $news['num_per_more']; ?>;
    var newposition = posts_visible + (posts_more * $.cookie('n_more'));
    var lastpos = newposition;
    var thispost = $("#post-" + lastpos).position();
    $('html,body').animate({
        scrollTop: thispost.top
    },1000);
  });
});

Answer 2

在运行时添加项目时尝试实时而不是绑定

$('.loadmore').live('click', function() {
  // Live handler called.
});

阅读此内容以获取更多信息

http://api.jquery.com/live/

Answer 3

/* Load jQuery from Google API */
$(document).ready(function(){
    function AnotherContent()
    {   
    /* display Loading text */
    $('#loadImage').html('loading...');

    /* load the rest of content */
    $.post("action.cfm?lastID="+$("#content").attr("title"),

    function(data){
        if (data != "")
        {
            $("#content").after(data);
        }
        $('#loadImage').empty();
    });
};

    $(window).scroll(function(){
        /* Load AnotherContent() function when scroll down to the bottom of page. */
        if ($(window).scrollTop() == $(document).height() - $(window).height()){
            AnotherContent();
        }
    });

});

http://www.ppshein.net/index.cfm/2010/10/14/coldfusion-load-content-like-facebook-and-twitter

http://www.ppshein.net/index.cfm/2010/10/14/load-content-like-facebook-and-twitter

Answer 4

您也可以尝试使用jQuery的scrollTo插件。可在jQuery scrollTo Home

获取的文档

以下是一些demos。

我可以在load（）之后滚动到这个DIV吗？

4 个答案: