来自呈现为 Ajax 响应的表单的 Ajax 调用（jQuery + Grails：链接 ajax 请求）答案

【问题标题】：Ajax call from a form rendered as Ajax response (jQuery + Grails: chaining ajax requests)来自呈现为 Ajax 响应的表单的 Ajax 调用（jQuery + Grails：链接 ajax 请求）
【发布时间】：2010-03-28 07:19:01
【问题描述】：

我期待以下情况很常见，但在网上找不到太多帮助。我有一个通过 Ajax 加载的表单（例如，创建实体表单）。它是通过按钮单击（加载）事件加载的

$("#bt-create").click(function(){
                     $ ('#pid').load('/controller/vehicleModel/create3');
                    return false;
                    });

响应（表单）被写入 pid 元素。表单的名称和id为ajax-form，提交事件附加到一个ajax post请求

$(function() {
             $("#ajax-form").submit(function(){
                // do something...
                 var url = "/app/controller/save"
         $.post(url, $(this).serialize(), function(data) {
            alert( data ) ; /// alert data from server
          });

我可以单独进行上述 ajax 操作。如果从静态 html 文件调用，即 ajax post 操作成功。但是，如果我链接请求（在完成第一个请求之后），以便它从第一个请求生成的输出表单中调用，则不会发生任何事情。我可以看到 post 方法是通过 firebug 调用的。有没有更好的方法来处理上述流量？

我注意到了一件更有趣的事情。如您所见，我使用 grails 作为我的平台。如果我将 javascripts 保留在 main.gsp（主布局）中，提交事件将不会注册，因为在 firebug 中没有命中断点。但是，如果我在模板文件（呈现上面的表单）中定义了 javascript，则会触发断点，但正如我所解释的，控制器不会调用该操作。我将 javascript 更改为 head 部分，但结果相同。

非常感谢任何帮助。谢谢，巴布。

【问题讨论】：

标签： jquery ajax grails

【解决方案1】：

需要在第一个ajax请求的成功处理程序中注册表单提交处理程序：

$("#bt-create").click(function() {
    $('#pid').load('/controller/vehicleModel/create3', function() {
        $("#ajax-form").submit(function() {
            // do something...
            var url = "/app/controller/save"
            $.post(url, $(this).serialize(), function(data) {
                alert( data ) ; /// alert data from server
        });
    });
    return false;
});

我还建议您使用jQuery form plugin。您的代码将如下所示：

$('#bt-create').click(function() {
    $('#pid').load('/controller/vehicleModel/create3', function() {
        $('#ajax-form').ajaxForm(function() {
            alert('thanks for submitting');
        });
    });
    return false;
});

无需获取表单url、序列化参数等...

【讨论】：

感谢您的快速回复。我正在评估你的建议。仍然试图弄清楚您的评论，即第二个请求需要在第一个 ajax 请求的成功处理程序中注册表单提交处理程序。那么我认为的方式是，那么第三个请求是什么。为什么不能很简单，比如向事件注册一个 ajax 操作，获取响应并在必要时更新 DOM。如果第一个完成，则允许任何其他 Ajax 调用。如果它们不相关，为什么它需要在第一个事件上注册。我会探索更多，但任何提示都会有所帮助。再次感谢。

【解决方案2】：

jQuery 表单插件帮助我缩短了代码，并且似乎有更多选项（回调）来进行更精细的控制。但是，Darin 建议的代码也很有效。对于任何阅读这篇文章的人，回答我问题的第二部分。 $(document).ready() 仅在文档最初加载后触发。如果要绑定事件之后生成或包含的 DOM 元素，可以使用 .live (ver 1.3+) 绑定事件。请参阅http://api.jquery.com/live/ 的文档谢谢。

【讨论】：