Question

我正在尝试将一些点击事件绑定到侧边栏我动态添加到dom并将其从左外侧滑动到视图中（左对齐）。它工作正常，但边栏内的事件不起作用。

这是观看代码：

define(function (require) {
    "use strict";

    var $ = require('jquery'),
        _ = require('underscore'),
        Backbone = require('backbone'),
        Mustache = require('mustache'),
        optionstpl = require('text!tpl/misc/options.html'),
        options = Mustache.compile(optionstpl);

    return Backbone.View.extend({
        events: {
            'click .homebtn': 'homebtn'
        },

        initialize: function () {
            this.opened = false;
        },

        toggleOptions: function (event) {
            if (!this.opened) {
                var page = $('<div></div>').attr('class', 'page page-left transition options').html(options());
                this.setElement(page);
                $('#container').append(this.$el);
                $('#container')[0].offsetWidth;
                this.$el.removeClass('page-left');
                this.events['click .homebtn'] = 'homebtn';
                this.delegateEvents();
                this.opened = true;
            } else {
                $('.page.options').one('webkitTransitionEnd', function (e) {
                    $(e.target).remove();
                }).addClass('page-left');
                this.opened = false;
            }
        },

        homebtn: function (e) {
            alert('homebtn pressed');
            this.toggleOptions(e);
            ee.Routers.mainRouter.navigate('');
        }
    });
});

如您所见，初始化视图时，元素不会添加到DOM中。因为当我单击页面上的某个按钮时，该侧栏应该只显示，这就是我从另一个视图调用toggleOptions的原因，该视图充当了这个视图的父视图。显示和隐藏此侧边栏工作正常，但我的点击事件应该触发homebtn功能根本不起作用。在切换时，我使用jquery动态创建新元素，并使用setElement将其指定为新的'el'，然后将其添加到DOM并调用delegateEvents以使我的事件绑定到它，但似乎这不起作用。我在这里做错了什么？

PS：正如你在else块中看到的那样，我在移出视图后移除侧边栏，这就是我重新创建它并调用delegateEvents再次获取丢失事件的原因。但即使我打开侧边栏并单击主页按钮，也没有任何反应。所以我的事件甚至会受到约束。

Answer 1

嗯...不确定这里有什么问题，但我做了一个简单的jsfiddle： http://jsfiddle.net/ezH4R/

您的代码存在一个小问题：

var page = $('<div></div>').attr('class', 'page page-left transition options').html(options());
this.setElement(page);
$('#container').append(this.$el);

因此，当您致电this.setElement(page)时，您视图的el将切换为page div。您的所有视图元素也将在div上委派。（顺便说一句，我认为你不需要在调用setElement之后手动分配事件。）所以，当下次再次调用toggleOptions时，（如果打开=== false）你将创建div，将视图的el设置为新视图，然后将其附加到#container。我没有看到旧的div被删除/销毁的位置（或者是否），但是视图将会unDelegate旧div上的事件。

所以当您删除'.page.options'时，实际上是删除了视图的el！我想我们需要看到将视图带回来的部分，也许这就是为什么你的代码无法运行的原因。你可以发布那段代码吗？

骨干事件不受动态添加内容的约束

1 个答案: