jquery - 主干选项选择适用于 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
}