javascript - 用AJAX改变页面内容，然后执行JS

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 元素返回未定义。如何解决这个问题？

Answer 1

AJAX 是异步执行的(顾名思义)，因此您应该等待 AJAX 调用完成再更改页面的滚动位置。另外，由于您已经在使用 jQuery，因此您可以将 AJAX 调用的代码减少为使用 $.ajax() (或 $.get()，即GET 请求的简写)，这要简单得多，并且 native 返回的 Promise(我们监听它以检查 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);
        });
    })

});