jquery - jQuery：我如何在 ajaxComplete 方法中设置文本但淡入而不是立即显示

Question

我是一个公认的 jquery 菜鸟，通过 api 文档和 jsfiddle 学习库。我目前正在尝试了解为什么以下内容无法按预期工作。

这是html的简单部分

<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>

这是我正在尝试的jquery...

$(document).ajaxComplete(function (event, xhr, settings) {
    if (settings.url === "ajax/test.html") {        
        $(".log").hide();
        $("Triggered ajaxComplete handler. The result is " + xhr.statusText).appendTo(".log").fadein();
    }
});

$(".trigger").click(function () {
    $(".result").load("ajax/test.html");
});

不幸的是，似乎发生的事情是附加操作没有正确执行，因为抛出了未处理的异常，因为文本“Triggered ajax ...”被视为选择器，但我对 appendTo()读取jquery API的功能是您可以像这样动态创建内容。显然，我在某个明显的地方出错了，我会感谢任何能解释为什么这是错误的以及我能做些什么来纠正这个问题的人。

Answer 1

改为使用.text()。

$(".log").hide()
         .text("Triggered ajaxComplete handler. The result is " + xhr.statusText)
         .fadeIn();

否则，您需要.append()改用。

$(".log").hide()
         .append("Triggered ajaxComplete handler. The result is " + xhr.statusText)
         .fadeIn();

注意这两种方法是不一样的。前者将替换 的内容，.log后者将文本附加到.log.

Answer 2

尝试

$(".log").html("Triggered ajaxComplete handler. The result is " + xhr.statusText)
     .fadeIn();