Question

我正在构建一个应用来管理表格。我使用小胡子模板，这样当我需要发送一些数据时，表单会使用必要的数据呈现，然后它会发出请求。我会尝试解释一下。

这是我渲染表单的地方，现在可以使用

function renderForm(selector, args){
                $.get('includes/tables/form.mustache', function(template) {

                    var rendered = Mustache.render(template, args);
                    $(selector).append(rendered);
                });
            }

问题是，在追加后我尝试像往常一样提交表单（$ form.submit（））但该部分不起作用。我知道元素不是加载的DOM的一部分，这就是选择器无法工作的原因。我的问题是，是否有办法让它提交我刚刚附加的表格。我知道我可以使用ajax发送数据，但实际上我需要它来发布并加载页面。

感谢任何帮助！

编辑：

这是触发模板渲染的函数：

        $('.main').on('click', '.save-absolute', function(){

            var update_id = $(this).attr('data-update');
            var args =  {
                            'id' : 'update_row_form',
                            'method' : 'POST',
                            'action' : document.URL,
                            'method_force' : 'put',
                            'values' : []
                        };

            $('.table_cell_input').each( function(){
                var value = $(this).val();
                args.values.push({'name' : value, 'value' : value});
            });
            args.values.push({'name' : 'update_id', 'value' : update_id});

            // Renders and submits the form
            renderForm('.main', args);

            //NOT SUBMITTING
            $('#update_row_form').submit();
        });

上面的第一个函数是呈现模板的函数，事情就是模板渲染好了，我可以在代码中看到它。但.submit（）部分只是没有做任何事情

Answer 1

在您的代码中使用此功能

renderForm('.main', args);

使用异步的$.get。这意味着它后面的代码

$('#update_row_form').submit();

在ajax调用之前运行，该调用使您的模板完成并附加渲染的模板。

您可以允许renderForm函数接受第三个参数，该参数是在呈现模板后运行的回调函数。然后，您可以在添加表单后选择执行任何操作。

像

这样的东西

function renderForm(selector, args, callback) {
    $.get('includes/tables/form.mustache', function(template) {
        var rendered = Mustache.render(template, args);
        $(selector).append(rendered);
        if ( typeof callback === "function" ) {
            callback();
        }
    });
}

允许你使用

renderForm('.main', args, function() {
    // anything you like here
    $('#update_row_form').submit();
});

Answer 2

由于它是动态生成的，因此不会使用普通查找选择器$(#formId).submit()

提交表单

相反，你应该从DOM中找到元素并提交它：

$(document).find("form#form1").submit();

或者您可以从其他静态内容中获取参考来查找表单。

DEMO

是否可以通过jQuery提交附加表单？

2 个答案: