Javascript 为什么jQuery隐藏事件没有触发，主干子视图没有渲染？

现在已解决-请参阅底部

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

“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;
});

---

这个问题是因为我在渲染完成之前在视图中设置了内部元素变量，所以元素之间没有任何链接。我通过将元素初始化提取到渲染成功回调的末尾来解决此问题。

我找到了此问题的解决方案。您能否发布此修复方案，以便以后遇到此问题的每个人都能找到解决方案。请注意，你也可以接受自己的答案作为解决方案。这是有时间限制的-我在一个小时内回答了，所以我不能将其作为答案发布，这有点疯狂。此修复程序张贴在问题的末尾。现在正确添加的答案已升级

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;
});