Question

通过Ajax创建新用户时，新的用户元素（手动创建）不是委派事件。

如果我尝试将我的元素从一个列表移到另一个列表，则调用this.delegateEvents()将应用单击侦听器。但是，无论我尝试什么，我都无法将点击侦听器应用于这个新创建的元素。

事件甚至不需要附加到模型上，只需要一个简单的显示/隐藏事件即可。

events: {
      'click a.toggle': 'toggleContent',
    },

addNewUserElement: function (userId) {
    var $formName = this.$('form').attr('name');
    var $listElement = this.createNewListElement(userId, $formName);
    this.trigger('user-created-event', $listElement); // this.onUserCreate
},

createNewListElement: function (userId, $formName){
    var html =  this.$('form input#' + $formName + '_lastName').val().toUpperCase()
    // more html creation
    return html;
}

onUserCreate: function ($el) {
   var targetList = '#active-users'
   alert("User created");
   this.insertIntoList(targetList, $el);
},

insertIntoList: function(targetList, $elementToMove){
        this.undelegateEvents();
        var added = false;
        var $targetList = // grab a set of <li>'s

        $targetList.append($elementToMove);

        this.delegateEvents();
        return false;
    },

Answer 1

我在这里遇到的问题是我正在创建一个原始的HTML片段而不将其附加到Backbone模型。它需要附加到JS模型并手动分配所有相关的侦听器。这也是为什么将元素从一个列表移动到另一个列表不会产生相同的问题，因为它们已经附加到另一个JS类。

在代码的另一部分中，有一个createChildViews方法，所以我把它分开并通过这个方法传递了新的HTML：

createChildViews: function () {
    var $els = this.$('#active-users li, #deactivated-users li');
    _.each($els, function (element) {
        this.createChildView(element);
    }, this);
},

createChildView: function(element){
    var user = new User({ // the other JS class
        el: element
    });
    this.listenTo(user, 'user-created-event', function (view) {
        this.onUserCreate(view);
    }, this);

},

onUserCreate: function ($el) {
    var targetList = '#active-users';
    window.alert("User created");
    this.createChildView($el);
    this.insertIntoList(targetList, $el);
},

这意味着所有相关的侦听器都附加到HTML。

新创建的元素不是Backbone中的委托侦听器

1 个答案: