AJAX 以重复的形式保存

Question

信息和代码：

我正在开发 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 对象的父对象

注意：我已尽力彻底解释和演示该问题，如果您需要更多信息，我将很乐意尽我所能提供帮助

Answer 1

动态 AJAX 和事件委派：

鉴于相关 div 的动态特性，原始 AJAX 将不会应用于它们。要解决此问题，请将您希望 ajax 侦听器的所有 dom 放入各种容器中（例如：一个 div with id: container）。

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

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

其中 change 应替换为您要处理的操作，而 Name 应替换为您要查找的 dom 的 Id/class。如果有人需要这方面的更多信息，请查看关于 AJAX 或 JQuery 的“事件委派”。

获取特定项目：

为了确保在具有相同或相似 IDs/class 名称的情况下获得正确的对象（这是一种不鼓励的做法，尽可能避免），您可以查询 $(this) 获取被更改的对象。

如果需要，您可以使用它作为基础来获取它周围的对象（例如，在嵌套 divs 的示例中。如果您需要，可以通过子数组或子节点来完成down，parentNode是否需要上去等。还有其他方式，比如查询选择器，这只是一个思路。

针对这种情况的一个提示，虽然根据设置在实践中实施起来可能很复杂，但如问题中所述的节点重复，更改相关部分的 ID 以确保唯一性。

AJAX 以重复的形式保存

AJAX saving with duplicated forms

javascript

ajax

asp.net-ajax

asp.net-web-api

asp.net-core

动态 AJAX 和事件委派：

获取特定项目：