使用重复的表单进行 AJAX 保存

如何解决使用重复的表单进行 AJAX 保存

---

信息和代码：

我正在开发一个 ASP.NET 代码 Web 应用程序。我的 UI 允许用户通过他们在表单中的输入来创建一个动态数量的对象。因此，可以同时存在多个相同的表单。

例如，假设存在以下许多基本形式：

<div class="Text example div">    
    <div class="form-group">
        @Html.LabelFor(model => model.Name,htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name,new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name,"",new { @class = "text-danger" })
        </div>
    </div>
</div>

我想在更改“名称”字段时使用 ajax 保存此对象，使用如下所示的内容：

   $("#Name").change(function () {
        //Do stuff
    });

ajax 应该将对象保存到数据库中，并且会有一个视觉变化，在本示例中由代码片段中的“文本示例 div”表示。问题是，由于这个 UI 的动态特性，技术上有很多 #Names。我想确保我不仅要保存预期的文本，而且能够调整与它们相关的适当文本，而不是更改所有文本。

请记住，这些 div 是通过复制基础 div 动态生成的，因此它们都以相同的信息开头。

---

我尝试过的：

我曾尝试在创建时创建循环来更改所有对象的 ID，但每次都必须这样做并考虑到代码非常笨重，所以我希望有更好的选择。

我已经尝试寻找方法来获取更改后的 #Name 对象的父对象

---

注意：我已经尽力解释和演示这个问题，如果您需要更多信息，我会尽我所能满足

解决方法

动态 AJAX 和事件委托：

鉴于所讨论的 div 的动态特性，原始 AJAX 将不会应用于它们。要解决此问题，请将您希望拥有 ajax 侦听器的所有 dom 放在各种容器内（例如：id 为容器的 div）。

从这里开始，将AJAX选择设置为以容器为目标，并使用“on”功能搜索您需要的对象的类/ID。在上述帖子的情况下，这看起来像这样：

$("#container").on("change",'#Name',function () {
     //do something 
});

其中更改应由您希望处理的操作替换，而 Name 应由您正在查找的 dom 的 Id/class 替换。如果有人需要更多相关信息，请查看有关 AJAX 或 JQuery 的“事件委托”。

---

获取特定物品：

为了确保您得到正确的对象，如果它们具有相同或相似的 ID/类名称（这是不鼓励的做法，如果可能的话尽量避免），您可以查询 $(this) 以获取已更改的对象。

如果需要，您可以使用它作为基础来获取它周围的对象（例如，在一个带有嵌套 div 的示例中。如果需要向下，可以通过 children 数组或 childNode 来完成，如果需要，可以通过 parentNode 来完成go up 等，还有其他方式，比如查询选择器，这只是一个想法。

针对这种情况的一个提示，尽管根据设置在实践中实现起来可能很复杂，但在问题中描述的节点的重复上，更改相关部分的 id 以确保唯一性。