javascript - jQuery：找不到文档准备好的元素

Question

我遇到了一个奇怪的 Javascript 行为：

索引.html

<div id="content">
    <button type="button" onclick="goDownload()">Click</button>
</div>

你好.html

<div id="myId">
</div>

<script type="text/javascript">
    $(function() {
        doStuff();
    });
</script>

文件.js

function goDownload() {
    $.ajax({
        url: "hello.html",
        cache: false,
        success: function (response) {
            $("#content").append(response);
        }
    });        
}

function doStuff() {
    //If I wait a little bit (e.g alert/timer), the below works
    //otherwise it does not

    $("#myId").html("Hello from doStuff()");
}

我知道 ajax 调用是一个异步请求，但我看不出这在什么时候会成为一个问题。（我知道我可以在成功回调中执行我的 doStuff() ，但对我来说并非如此）。有任何想法吗？

Answer 1

调用的结果$.ajax是一个 Deferred 对象 ( http://api.jquery.com/category/deferred-object/ )，因此您可以利用它的方法来检测它何时完成：

var downloadWaiting;

function goDownload() {
    downloadWaiting = $.ajax({
        url: "hello.html",
        cache: false,
        success: function (response) {
            $("#content").append(response);
        }
    });
}

function doStuff() {
    downloadWaiting.done(function () {
        $("#myId").html("Hello from doStuff()");
    });
}