在 AJAX 回调之后，onblur 会返回到原始(或更新）字段

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

本文关键字：原始 更新 字段 返回 回调 AJAX 之后 onblur      更新时间：2023-09-26

我有一个AJAX回调：

.HTML：

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

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

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

我试图做的是，一旦字段被填写（或未填写）并且字段模糊，它要么回到原始值，要么回到新更新的值（但不再是输入字段）。

我四处寻找了一段时间，但一无所获。我也是javascript和AJAX的新手。如果有帮助，我主要在这个应用程序中使用 PHP。

谢谢

加法

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

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

我仍然不完全遵循，但希望这将向您展示一种创建/更改 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/

相关文章：