Jquery脚本不适用于新元素[重复]答案

【问题标题】：Jquery Script Doesn't work for new elements [duplicate]Jquery脚本不适用于新元素[重复]
【发布时间】：2016-05-02 11:53:40
【问题描述】：

目前，我编写的 Ajax 表单效果很好，表单的所有输出都会放在 Result 中，期望此时表单的结果是另一个表单，我的脚本不适用于作为结果的新表单旧形式

我的脚本不适用于新表单所以，我需要让新表单像旧表单一样工作，这可能吗？

$(document).ready(function()
{
    $("form").submit(function(e)
    {
        e.preventDefault();
        $("#Result").html("<div id='Loading'></div>");

        $.ajax(
        {
            type: "POST",
            data: $(this).serializeArray(),
            success: function(Data)
            {
               $("#Result").html(Data);
            }
        });
    });
});

【问题讨论】：

您是说来自 ajax 调用的响应可能是另一种形式，然后其行为方式与第一种形式不同？
@Pabs123，没错
@Kamran Borbor 也共享 HTMl 代码。验证结构如何填充新表单。
@juporag .live() 已经过时了一段时间，您应该链接到一个使用 .on() 的示例。
作为新元素的表单提交事件不起作用，因为在这种情况下它是动态元素。查看 SO 上的类似问题和问题。 juporag 的参考资料也是您正在寻找的。在表单的父元素上添加一个事件监听器。 body / document

标签： javascript jquery html ajax forms

【解决方案1】：

试试

$("#Result").on("submit", "form", function(e) { 
    ...  YOUR CODE  .....
});

编辑：如果您想捕捉全局表单提交事件（感谢@pratikwebdev）：

$(document).on("submit", "form", function(e) { 
    ...  YOUR CODE  .....
});

【讨论】：

#result 包含动态元素。家长form 还在外面。在这种情况下，OP 需要form 提交事件。 OP 可能需要使用$(document).on 或`body 可能。
@pratikwebdev - 谢谢你，我已经更新了我的答案
干得好！不用担心。

【解决方案2】：

试试这个：

$("body").on("submit", "form", function(e){ 
  //Your code.
});

您遇到的问题是因为当您将提交侦听器添加到“表单”时，动态创建的form 元素不存在，因此这些新的form 没有附加侦听器。

事件委托允许我们将单个事件侦听器附加到父元素，它将为匹配的所有后代触发选择器，这些后代是现在存在还是被添加到未来。

更多关于jQuery.on和event delegation的信息

【讨论】：