骨干，觸發視圖事件

Question

嗨，我嘗試在視圖初始化函數內部進行一些dom修改后觸發視圖事件

編輯：對不起我的問題，目前尚不清楚。 這里是完整的代碼示例。 最后，我發現我是在添加類之前觸發了change事件。感覺很愚蠢，但我奮斗了幾個小時！ 謝謝您的支持！

    <script src="https://code.jquery.com/jquery-1.12.0.js"></script>
    <script src="http://underscorejs.org/underscore.js"></script>
    <script src="http://backbonejs.org/backbone.js"></script>
    <script type="text/javascript">
    var App = {};

    (function($) {

        App.FormView = Backbone.View.extend({
                events: {
                    "change .autofill" : "autofill"
                },

                initialize : function() {
                    _.bindAll(this, "autofill");

                    this.formelements = {"input" : {"autofill" : true}};

                    for(var elementId in this.formelements){
                        if(this.formelements[elementId].autofill){
                            var $el = $("#"+elementId);
                            //$el.trigger("change").addClass("autofill")//does not work trigger before class added :-(
                            $el.addClass("autofill").trigger("change");
                        }
                    }
                },

                autofill : function(e){
                    console.log("ok");
                }
        });     

        App.init = function(containerId){
            new App.FormView({el : "#"+containerId});
        }
    })(jQuery);
    </script>


    <div id="container">
        <input type="checkbox" id="input" />
    </div>
    <script type="text/javascript">
        App.init("container");
    </script>

Answer 1

您正在嘗試在DOM中尚未存在的元素上觸發事件。 那是行不通的，您必須在渲染視圖后觸發事件。

我不知道你怎么渲染，但考慮一下

var View = Backbone.View.extend({

  events: {
    'change input': 'autofill'
  },

  render: function() {
    this.$el.html('<input>');
    this.$('input').trigger('change');
  },

  autofill: function(e) {
    console.log('ohai thar');
  }

});

var view = new View({
  el: $('#root')
});
view.render();

在添加到文檔的元素上觸發事件時，它將被拾取。