Backbone.js 提交事件未触发答案

【问题标题】：Backbone.js submit event not firingBackbone.js 提交事件未触发
【发布时间】：2013-05-22 02:58:45
【问题描述】：

我不知道这里发生了什么。我认为这是因为我稍后会在视图中加载表单，但老实说我不确定。这是我的看法。

define([
    'jquery',
    'underscore',
    'backbone',
    'serializeForm',
    'backboneForms',
    'text!templates/services/ServicesTemplate.html',
    'models/ServiceModel',
    'forms/NewServiceForm',
    'text!templates/forms/ServiceFormTemplate.html',
    'collections/RegionsCollection',
    'collections/UsersCollection'
], function($, _, Backbone, serializeForm, backboneForms, ServicesTemplate, ServiceModel, 
            NewServiceForm, ServiceFormTemplate, RegionsCollection, UsersCollection){

    // The form
    var form;

    // What's gonna be clicked
    var clicked;

    // Get the user's credentials
    if($.cookie('UserInfo'))
        var userCreds = JSON.parse($.cookie('UserInfo'));

    var ServicesView = Backbone.View.extend({
        el: '.body',
        render: function() {
            // Load everything
            var servicesTemplate = _.template(ServicesTemplate);
            this.$el.html(servicesTemplate);
        },
        events: {
            'click .btn': 'loadForm',
            'submit': 'addService'
        },
        loadForm: function(ev) {
            // Save what was clicked
            clicked = $(ev.target).html();

            // Save the scope
            var that = this;

            // Create the regions collection
            var regionsCollection = new RegionsCollection();

            var serviceModel = new ServiceModel();

            var serviceFormTemplate = _.template(ServiceFormTemplate);

            // Create the form
            form = new NewServiceForm({
                template: serviceFormTemplate,
                model: serviceModel
            }).render();

            $("#form").html(form.el);

            $('.body').on('submit', 'form', function() {
                alert( "submit firing" );
            });
        },
        addService: function(ev) {
            var errors = form.commit();

            if(!errors) {
                var newService = $(ev.currentTarget).serializeForm();
                newService.cluster = clicked;
                console.log(newService);
            } else {
                $.each(errors, function(key, value) {
                    $("[name='" + key + "']").closest(".control-group").addClass("error");
                    $("[name='" + key + "']").closest(".control-group").find(".text-error").html("<small class='control-group error'>" + value.message + "</small>");
                });
            }
            return false;
        }
    });
    return ServicesView;
});

我尝试将事件绑定到生成的表单上，正如您在上面看到的，我尝试捕获任何提交事件。非常感谢您对此提供任何帮助。

编辑：这是我的索引页的样子

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>Backbone Auth</title>
        <?php include('includes/head_includes.php'); ?>
    </head>
    <body>
        <div class="header"></div>

        <div class="container body">
        </div>
        <?php include('includes/js_files.php'); ?>
    </body>
</html>

这就是我的表单的大致样子。 .control-groups 都使用主干表单扩展名填充字段。

<form id="addservice" accept-charset="UTF-8">
    <div id="error" class="alert alert-error" style="display:none;"></div>
    <fieldset>
        <div class="control-group">
            <div class="controls">
                <label>Region</label>
                <div class="text-error"></div>
                <div data-editors="region"></div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <label>Stage</label>
                <div class="text-error"></div>
                <div data-editors="stage"></div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <label>Description</label>
                <div class="text-error"></div>
                <div data-editors="description"></div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <label>Primary Contact</label>
                <div class="text-error"></div>
                <div data-editors="contact"></div>
            </div>
        </div>

        <input id="AddService" class="btn btn-primary" type="submit" name="submit" value="Add Service" />
    </fieldset>
</form>

EDIT2：这是我的NewServiceForm

define([
    'jquery',
    'underscore',
    'backbone',
    'backboneForms'
], function($, _, Backbone, backboneForms){
    var NewServiceForm = Backbone.Form.extend({
        schema: {
            region: { 
                type: 'Select',
                title: 'Disaster Region',
                options: [],
                validators: [
                    'required'
                ]
            },
            stage: { 
                type: 'Select',
                title: 'Stage',
                options: [
                    {val: "", label: "Select One"},
                    {val: "Assessment", label: "Assessment"},
                    {val: "Planned", label: "Planned"},
                    {val: "Commenced", label: "Commenced"}
                ],
                validators: [
                    'required'
                ]
            },
            description: {
                type: 'TextArea',
                title: 'Description',
                editorAttrs: {
                    maxlength: 140
                },
                validators: [
                    'required'
                ]
            },
            contact: { 
                type: 'Select',
                title: 'Primary Contact',
                options: [],
                validators: [
                    'required'
                ]
            }
        }
    });

    return NewServiceForm;
});

【问题讨论】：

当您提交表单时，您是否在页面上看到了提交事件？尝试在 #form 的父级上使用 jQuery 为任何提交注册处理程序，如下所示：stackoverflow.com/a/9331127/323005
@damienc88 所以我在$("#form").html(form.el); 下添加了$('body').on('submit', '#form', function() { alert( "submit firing" ); });，它根本没有注册提交事件。
@muistooshort 我添加了我的索引页和表单模板，以便您了解它的外观。
再次尝试使用'form'，而不是'#form'，您指定的是元素标签，而不是选择器。您可以根据需要指定此内容，甚至可以从浏览器控制台或 document.load 指定，如果此时您的正文存在。
我建议简化你的代码：去掉除了最基本的结构之外的所有内容。现在噪音太大，无法发现问题。

标签： javascript jquery backbone.js backbone-events backbone-forms

【解决方案1】：

哇！！终于想通了！我继续将表单的渲染移到视图的渲染函数中。所以现在渲染看起来像这样：

        render: function() {

            var serviceModel = new ServiceModel();

            var serviceFormTemplate = _.template(ServiceFormTemplate);

            // Create the form
            form = new NewServiceForm({
                template: serviceFormTemplate,
                model: serviceModel
            }).render();

            // Load everything
            var servicesTemplate = _.template(ServicesTemplate);
            this.$el.html(servicesTemplate);
        }

其他一切都保持不变。现在它可以工作了！

【讨论】：