骨幹選項選擇適用於Firefox，但不適用於Chrome

Question

我使用Backbone處理選擇框中選項的點擊。出於某種原因，它可以在Firefox中使用，但不能在Chrome中使用。

這不是「using local files in Chrome」問題，因爲它全部在我的服務器上運行。

在下面的代碼片段中，FieldView表示選擇列表中的單個<選項>。在Firefox中，單擊任何選項將運行clicked()函數。在Chrome中，當我點擊任何選項時，似乎沒有任何事情發生。

var FieldView = Backbone.View.extend({ 
    tagName: "option", 

    initialize: function() { 
     _.bindAll(this, 'render'); 
    }, 
    events: { 
     "click": "clicked" 
    }, 
    clicked: function (e) { 
     var a_display_name = this.model.get("display_name"); 
     var console_out = "selected " + a_display_name 
     console.log(console_out); 
     $("#fake_console").html(console_out); 

    }, 
    render: function() { 
     this.$el.attr('value', this.model.get('COLUMN_NAME')).html(this.model.get('display_name')); 
     return this; 
    } 
}); 

http://jsfiddle.net/thunderrabbit/QXAAW/3/

我如何能得到這個在Chrome中工作？

Answer 1

您應該改變，jQuery docs使用。

要訪問FieldsView的集合模型，你應該得到的選擇的選項的索引事件添加到FieldsView：

events: {'change': 'optionChanged'}, 
optionChanged: function() { 
    var index = this.$el.children('option:selected').index(); 
    var model = this.collection.at(index); // this is the model of the option view 
} 

Answer 2

這裏是一個更新的jsfiddle：http://jsfiddle.net/phoenecke/QXAAW/4/

的change事件連接到<select>元素。然後您可以使用<select>的值查找模型。另外，我將idAttribute: 'COLUMN_NAME'添加到模型中，假設它是唯一的ID。

 events: { 
      "change": "changed" 
     }, 
     changed: function (e) { 
      // the select's val is the value of the selected option 
      var id = this.$el.val(); 
      // find model in the collection 
      var model = this.collection.get(id); 
      var a_display_name = model.get("display_name"); 
      var console_out = "selected " + a_display_name 
      console.log(console_out); 
      $("#fake_console").html(console_out); 

     },