jquery - 将表单添加到页面后提交表单等

Question

我有一个带有搜索按钮的页面。点击提交按钮后，会发出一个 ajax 请求，从 Controller 获取 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();
            });
        });
    });
});