Question

我正在创建一个应用程序，它将DOM对象作为子对象添加到另一个DOM对象，然后这个子对象可以有子对象。我正在使用表单提交和验证，如下所示。问题是，当我提交并接收AJAX响应时，我将新表单添加到DOM中，当提交它时，它会绕过initializeSubmit函数并加载新页面。

jQuery(document).ready(function($) {
    $('#wpbody-content form').each(initializeSubmit);
});

function initializeSubmit () {
    var $ = jQuery,
        $form = $(this),
        options = {
            submitHandler: function() {
                var postdata = {},
                    $inputs = $form.find('input, textarea'),
                    edit_fields = {};
                $inputs.each( function () {
                    // gather postdata
                });
                $.ajax( {
                    type : 'POST',
                    dataType : 'html',
                    url : ajaxurl,
                    cache : false,
                    data : postdata,
                    success : function ( response ) {
                            $container = $form.parent();
                            $container.after(response);
                            $newform = $(response).find('form');
                            $newform.each(initializeSubmit);
                    }
                });
            }
        }

    $form.validate(options);
};

我也尝试在成功函数中使用apply而不是每个：

initializeSubmit.apply($newform);

控制台日志在$ newform的jQuery数组中显示相应的表单。任何帮助表示赞赏！

Answer 1

我认为问题在于$(response).find('form')与使用response插入的$container.after(response);创建了.find('form')的不同DOM转换。

您需要确保success : function ( response ) { var $response = $(response); $form.parent().after($response); $response.find('form').each(initializeSubmit); }对实际插入的DOM节点起作用。

尝试：

{{1}}

使用jQuery提交ajax表单，并接收另一个表单以使用jQuery提交

1 个答案: