AJAX 回调后，onblur 返回到原始（或更新）字段

Question

我有一个 AJAX 回调：

HTML:

<a onCLick="loadXMLDoc(id1,id2)">(Add)</a>

这会调用一个 AJAX 函数，该函数回调一个基本的 html 输入字段来代替上面的“（添加）”

此输入字段中的 onChange 执行另一个 AJAX 回调，将用户输入加载到数据库中。

我想要做的是，一旦字段被填写（或未填写）并且字段变得模糊，它要么返回到原始值，要么返回到新更新的值（但不再是输入字段).

我已经搜索了一段时间，但一无所获。我也是 javascript 和 AJAX 的新手。如果有帮助，我主要在此应用程序中使用 PHP。

谢谢

加法

这就是我想要实现的目标：

该页面以 table 格式列出了不同的条目。
有一个特定字段有一个 ID（存储在数据库中），或者如果该字段为空（在数据库中），该字段将显示一个按钮以添加 ID。
按下时，按钮会调用一个回调输入字段的函数，这会取代之前的 "add" 按钮。 AJAX 回调将输入字段放置在 "add" 按钮的位置。
这是我需要帮助的地方： 用户输入 ID（或决定不输入）后，一旦该字段不再具有焦点，它就会从输入字段更改回到原来的状态或新输入的 ID。我正在尝试 在不刷新页面的情况下 完成所有这些操作。

Answer 1

我仍然没有完全理解，但希望这会向您展示一种 creating/changing DOM 元素的方法来响应您提到的事件：

$(document).ready(function() {
    $("#container").on("blur", ".name", function(e) {
        var val = $(this).val();
        if (!val) {
            $(this).closest(".row").html("<button class='add'>Add</button>");
        } else {
            $(this).closest(".row").html("<span class='label'>Name: </span><span>" + val + "</span>");
        }
    });

    $("#container").on("click", ".add", function(e) {
        var html = "<span class='label'>New Name: </span><input class='name' type='text' />";
        var row = $(this).closest(".row").html(html);
        row.find("input").focus();
    });

});

工作演示：http://jsfiddle.net/jfriend00/01ajd0y9/

AJAX 回调后，onblur 返回到原始（或更新）字段

After AJAX callback, onblur goes back to original (or updated) field

html

javascript

ajax

callback