2

我在使用主干将事件绑定到动态创建的元素时遇到了一些麻烦。

这是生成元素的主干视图的代码。('.modal')

var MakeModalView = Backbone.View.extend({
      el: '#btn-make-modal',

    events: {
        'click': 'makeModal'
    },

    makeModal: function () {
        $('body').html('<div class="modal"><div class="modal-close">&times;</div>Close me! I\'m a modal!</div>');
    }
});
new MakeModalView();

这是控制动态创建的元素的视图：

var ModalView = Backbone.View.extend({
    el: '.modal',

    events: {
        'click .modal-close': 'closeModal'
    },

    closeModal: function () {
        this.$el.remove();
    }
});
new ModalView();

我遇到的问题是控制动态创建的元素（ModalView）的视图没有将事件绑定到该动态元素。('.modal')

如何将元素绑定到主干中动态创建的“el”？

我查看了以下解决方案：

骨干动态创建的“el”不绑定事件

如何使用动态创建的“el”创建主干视图？

但我似乎仍然无法弄清楚如何将事件附加到动态元素。

我创建了一个小提琴来演示这种行为是如何工作的。http://jsfiddle.net/6wzzk/3/

4

1 回答 1

2

当您实例化 Backbone.View 时，Backbone 会尝试获取它el并进行事件订阅（委托）。因此，如果el不在 DOM 中，则事件不会触发。

在您的情况下，因为您正在使用该makeModal方法创建模型，所以只需将ModalView创建移到那里：

makeModal: function () {
    $('body').html('<div class="modal"><div class="modal-close">&times;</div>');
    new ModalView();
}

更新了 JSFiddle。

无论如何，创建ModalView应该是MakeModalView责任，并且在makeModal方法中这样做听起来是正确的地方。

于 2013-02-15T21:58:40.720 回答