jQuery改变元素的内容答案

【问题标题】：jQuery change contents of elementjQuery改变元素的内容
【发布时间】：2011-12-14 04:09:46
【问题描述】：

上述问题可能重复，但我不知道为什么它不起作用。我对 jQuery 也很陌生。

下面是函数的一部分（我现在写的全部）。它是由一个锚标记的onclick 事件触发的。

function changeStatus(user)
{
    var esc = true;
    $.get('ajax/popupBase.html', user, function(data, stat, d) {
        $("#AjaxFrame").html(data);
    }, 'html');

    $.get('ajax/changeStatus.html', user, function(data, stat, d) {
        $("#PopupBody").html(data);
    }, 'html');

    $("#AjaxFrame").fadeIn('fast');
    $("#PopupTitle").html("Status Update");
    $("#Popup").center();
    popupState = 1;

    return esc;
}

这是我与$.get() 一起使用的模板“popupBase.html”：

注意：“popupBase.html”是我在这个网站上的一个可重现的“弹出”窗口，我可以将数据插入到空的 div 中，并在可能的情况下重复使用 html

<div id="Popup">
    <form id="Popup1" method="post">
        <div id="PopupTitle"></div>

        <div id="PopupBody"></div>

        <input class="button" id="Save" name="saveChanges" type="submit" value="OK" />
        <input class="button" id="Cancel" name="clearChanges" type="button" value="Cancel" />
    </form>
</div>

#AjaxFrame 是我网站上所有 html 之外的容器（在 <body> 内部，#Wrapper 外部）。在我的$.get() 调用中，我的模板上还有两个空容器，分别称为#PopupTitle 和#PopupBody。

问题：将从“changeStatus.html”检索到的 html 插入到 #PopupBody 中可以正常工作，但是，从 #PopupTitle 添加静态文本不起作用。在this possible duplicate 的回答中，我尝试使用.text() 无济于事。

编辑：给未来读者的说明，我在每次使用后清除 #AjaxFrame 的内容，应该更新 ID 使用情况。

我尝试过的其他事情：清除 Chrome 的缓存（最新版本和便携式应用程序版本）并一遍又一遍地检查拼写错误。

我对此感到非常困惑，感谢任何帮助。

【问题讨论】：

抱歉，我不太清楚你想要什么...发生了什么？
啊，抱歉，我想我在没有意识到的情况下将问题滑入了一个段落。无论如何，我遇到的问题是$("#PopupTitle").html("Status Update"); 没有更改内容，而我可以使用$("#AjaxFrame").html(data); 和$("#PopupBody").html(data); 没问题。我真的不明白。 :|
您在哪里以及如何调用该函数changeStatus()？
附注我怀疑这是一个重复 ID 的情况，但如果有人可以给我可靠证明它是的，那么好吧。
@mmmshuddup - 正如我在顶部附近的问题中所述，我正在使用它，通过 onclick 事件锚定 (a) 标记。

标签： jquery

【解决方案1】：

您遇到了竞争条件，javascript 不会等待那些 $.get 函数完成后再运行它之后发生的事情。

如果你想让“状态更新”在你的 ajax 运行之后出现在 PopupTitle 中，它必须进入成功处理程序

function changeStatus(user)
{
    var esc = true;
    $.get('ajax/popupBase.html', user, function(data, stat, d) {
        $("#AjaxFrame").html(data);
    }, 'html');

    $.get('ajax/changeStatus.html', user, function(data, stat, d) {
        $("#PopupBody").html(data);
        $("#PopupTitle").html("Status Update");   //will over write what is in data
    }, 'html');

    $("#AjaxFrame").fadeIn('fast');

    $("#Popup").center();
    popupState = 1;

    return esc;
}

【讨论】：

啊哈！当之无愧的好人！
取决于你什么时候想要 AjaxFrame 真正淡入，#PopUp 到中心，你可能还需要移动它们 :) 很高兴我能帮忙