为什么我的jQuery隐藏事件没有启动，我的Backbone子视图没有渲染

现在已解决-请参阅底部。。。。

我有一个主干列表视图，上面有一个按钮，应该显示编辑元素。

"showAddEntry"函数中的jQuery hide（）调用或"versionEditView"的视图呈现都没有执行任何操作。我已经完成了，没有出现任何错误。我甚至尝试过在控制台中手动运行方法，看看hide发生了什么，但我没有取得任何进展。

这是主视图。。。

define(['ministry', 'jquery', 'models/m-version-info', 'views/about/v-edit-version-info-entry', 'text!templates/version-info/version-info.html'],
function(Ministry, $, VersionInfo, VersionInfoEditView, TemplateSource) {
    var versionInfoEntriesView = Ministry.View.extend({
        el: '#mainAppArea',
        template: Handlebars.compile(TemplateSource),
        versionInfoEditView: null,
        initialize: function () {
            this.$addEntryArea = $('#addVersionInfoEntryArea');
            this.$addEntryButton = $('#addVersionInfoEntryButton');
        },
        events: {
            'click #addVersionInfoEntryButton': 'showAddEntry'
        },
        render: function () {
            var that = this;
            var entries = new VersionInfo.Collection();
            entries.fetch({
                success: function (data) {
                    that.$el.html(that.template({ items: data.toJSON() }));
                }
            });
            return this;
        },
        showAddEntry: function() {
            if (this.versionInfoEditView != null) {
                this.versionInfoEditView.trash();
            }
            this.versionInfoEditView = new VersionInfoEditView({ el: this.$addEntryArea });
            this.$addEntryButton.hide();
            this.versionInfoEditView.render();
            return false;
        }
    });
    return versionInfoEntriesView;
});

这是孩子们的观点。。。

define(['ministry', 'models/m-version-info', 'text!templates/version-info/edit-version-info-  entry.html', 'jquery.custom'],
function (Ministry, VersionInfo, TemplateSource) {
    var editVersionInfoView = Ministry.View.extend({
        template: Handlebars.compile(TemplateSource),
        initialize: function () {
            this.$dbVersionInput = this.$('#dbVersion');
            this.$tagInput = this.$('#tag');
        },
        render: function () {
            this.$el.html(this.template());
            return this;
        },
        events: {
            'submit .edit-version-info-form': 'saveEntry'
        },
        saveEntry: function() {
            var entry = new VersionInfo.Model({ dbVersion: this.$dbVersionInput.val(), tag: this.$tagInput.val() });
            entry.save({
                success: function() {
                    alert('Your item has been saved');
                }
            });
            return false;
        }
    });
    return editVersionInfoView;
});

主模板。。。

<h2>Version Info</h2>
<div id="info">
    <a id="addVersionInfoEntryButton" href="#/versioninfo">Add manual entry</a>
    <div id="addVersionInfoEntryArea">
    </div>
    <ul id="items">
        {{#each items}}
        <li>{{dbVersion}} | {{tag}}</li>
        {{/each}}
    </ul>
</div>

编辑模板。。。

<form class="edit-version-info-form">
    <h3>Create a new entry</h3>
    <label for="dbVersion">DB Version</label>
    <input type="text" id="dbVersion" maxlength="10" />
    <label for="tag">Tag</label>
    <input type="text" id="tag" />
    <button type="submit" id="newEntryButton">Create</button>
</form>

我是个新手，所以我很可能做了一些完全错误的事情，但到目前为止，我看不出这种方法有什么错误，也没有出现任何错误。

好的-经过一些面部护理后按如下方式修复。。。

define(['ministry', 'jquery', 'models/m-version-info', 'views/about/v-edit-version-info-entry', 'text!templates/version-info/version-info.html'],
function(Ministry, $, VersionInfo, VersionInfoEditView, TemplateSource) {
    var versionInfoEntriesView = Ministry.View.extend({
        el: '#mainAppArea',
        template: Handlebars.compile(TemplateSource),
        versionInfoEditView: null,
        $addEntryArea: undefined, 
        $addEntryButton: undefined,
        initialize: function () {
        },
        events: {
            'click #addVersionInfoEntryButton': 'showAddEntry'
        },
        render: function () {
            var that = this;
            var entries = new VersionInfo.Collection();
            entries.fetch({
                success: function (data) {
                    that.$el.html(that.template({ items: data.toJSON() }));
                    that.$addEntryArea = that.$('#addVersionInfoEntryArea');
                    that.$addEntryButton = that.$('#addVersionInfoEntryButton');
                }
            });
            return this;
        },
        showAddEntry: function (e) {
            e.preventDefault();
            if (this.versionInfoEditView != null) {
                this.versionInfoEditView.trash();
            }
            this.versionInfoEditView = new VersionInfoEditView({ el: this.$addEntryArea });
            this.$addEntryButton.hide();
            this.$addEntryArea.append('Do I want to put it here?');
            this.versionInfoEditView.render();
        }
    });
    return versionInfoEntriesView;
});

这个问题是由于我在渲染完成之前在视图中设置了内部元素变量，所以这些元素什么都没有链接。我通过将元素初始化提取到rendersuccess回调的末尾来解决这个问题。