Question

您好我有以下代码：

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("text").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","data.html",true);
    xmlhttp.send();
}

我的按钮：

<a href="#" id="change-btn" onclick="loadXMLDoc(); return true;">Change page</a>

我的另一个剧本：

$(document).ready(function(){
    $("#change-btn").click(function(event) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $("#page-changed").offset().top
        }, 2000, "swing", function(){
            $("#page-changed").effect('shake', {times: 1, direction: 'left', distance: 5}, 300);
        });
});

如果#page-changed位于data.html文件之上，则效果很好。但是，如果它位于底部jQuery返回错误offset.top is undefined我理解问题是jQuery无法及时找到#page-changed元素并返回undefined。如何解决这个问题？

Answer 1

AJAX是异步执行的（顾名思义），所以你应该等到AJAX调用完成之前更改页面的滚动位置。此外，由于您已经在使用jQuery，因此您可以将AJAX调用的代码减少为使用$.ajax()（或$.get()，这是GET请求的简写），这样更简单，并且本机返回的promises（我们监听以检查AJAX调用是否完成）。

鉴于您的HTML，我们删除了内联JS：

<a href="#" id="change-btn">Change page</a>

对于你的JS来说，这很简单 - 尽管你需要自己填写AJAX调用的详细信息：

$('#change-btn').click(function(e) {

    // Prevent default
    e.preventDefault();

    // Make a GET request for data.html
    var loadXMLDoc = $.get({
        'url': 'data.html'
    });

    // Perform things when AJAX call is successful
    loadXMLDoc.done(function(data) {
        // Set innerHTML of #text element
        $('#text').html(data);

        // Then set scroll position
        $('html, body').animate({
            scrollTop: $("#page-changed").offset().top
        }, 2000, "swing", function(){
            $("#page-changed").effect('shake', {
                times: 1,
                direction: 'left',
                distance: 5
            }, 300);
        });
    })

});

使用AJAX更改页面内容，然后执行JS

1 个答案: