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

尝试

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

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

请确保您在每张表单上使用唯一的id。

更新

我为你创建了Fiddle。

Answer 2

在第一个/父表单的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();
            });
        });
    });
});

将表单添加到页面

2 个答案:

更新