将表单添加到页面后提交表单

Question

我有一个带有搜索按钮的页面。在点击提交按钮后，发出 ajax 请求以从控制器获取 json 并在我的页面中填充许多产品盒。每个框都是一个带有提交按钮的新表单。 我希望能够只提交其中一个新产品表单，在我的数据库中制作一些东西，并在我提交的表单中的 div 中成功提醒。 关键是因为我最初在页面中没有我的表单，所以我的脚本没有找到任何表单，那么如何将 ajax 函数附加到我在页面中没有但我稍后会有的表单？以及如何在 ajax 中提交单个表单？我尝试为所有创建的表单示例使用一个 id，然后尝试使用此代码捕获提交，但它不起作用。该页面导航到我的路线，而不是阻止默认和警报成功：

jQuery(function ($) {
    $(document).ready(function () {

        $(function () {
            $('form#dynamic').on('submit', function (e) {
                $.ajax({
                    url: form.prop('action'),
                    type: 'post',
                    dataType: 'json',
                    data: $(this).serialize(),
                    success: function (data) {

                        console.log(data);
                        alert('success');
                    }
                });
                e.preventDefault();
            });
        });
    });
});

我必须补充一点，我已经在页面中有两个表单用于搜索，它们附加到另一个 ajax 调用，如下所示：

var form = $(this);

这个有效：

jQuery(function ($) {
    $(document).ready(function () {

        $("body").on("submit", "form#dynamic", function (e) {

            var form = $(this);

            $.ajax({
                url: form.prop('action'),
                type: 'post',
                dataType: 'json',
                data: $(this).serialize(),
                success: function (data) {
                    console.log(data);
                    alert('success');
                }
            });
            e.preventDefault();
        });

    });
});

Answer 1

在您的第一个/父表单的 AJAX 提交中，为返回或添加到页面的所有新表单添加一个类名。然后为子表单提交设置监听器。

最后，在子表单提交的成功函数中关闭监听器，让它只为一个子表单运行。

jQuery(function ($) {
    $(document).ready(function () {

        $(function () {
            $('form#dynamic').on('submit', function (e) {
                $.ajax({
                    url: form.prop('action'),
                    type: 'post',
                    dataType: 'json',
                    data: $(this).serialize(),
                    success: function (data) {

                        console.log(data);
                        alert('success');

                        //listener for child form
                        $('.childForm').on('submit.child', function(evt){
                            evt.preventDefault();
                            //submit the child form here
                            $.ajax({
                                url:'',
                                success: function(){
                                    //turn off listener for child form
                                    $('.childForm').off('submit.child');
                                }
                            })
                        })

                    }
                });
                e.preventDefault();
            });
        });
    });
});

Answer 2

试试

$("body").on("submit", ".class-of-added-form", function() {
    // Do stuff here..
});

这基本上是将事件附加到您的正文，而不是动态添加到页面的表单本身。

只需确保您在每个表单上使用唯一的id。

更新

我为你创建了一个Fiddle。