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

时间:2013-02-23 10:55:06

标签: jquery ajax

我是一名录取的jquery noob,通过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 ...”被视为选择器,但是我对它的理解是因为正在抛出未处理的异常,因此追加操作没有正确执行。阅读jquery API的appendTo()函数就是你可以像这样动态创建内容。显然我在某个显而易见的地方出错了,并且会感谢那些能够解释为什么这是错误的人以及我能做些什么来纠正这个问题。

2 个答案:

答案 0 :(得分:2)

改为使用.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

答案 1 :(得分:0)

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