Backbone 单击事件未在 Google Chrome 中触发

Question

我有以下代码，它适用于除 Google Chrome 以外的所有浏览器。我希望每次单击一个选项时都用 "You selected option (selected option number)" 文本提醒我。我无法让它工作。

var MyView = Backbone.View.extend({

    el : "#eventPage",

    initialize : function(options) {
        _.bindAll(this, 'render', 'changeNum');
        this.render();
    },

    render : function(){
        var a = [];
        var b = 0;

        a[b++] = '<div>';
        a[b++] = '  <select id="select">';
        a[b++] = '      <option class="sel" id="1">ONE</option>';
        a[b++] = '      <option class="sel" id="2">TWO</option>';
        a[b++] = '      <option class="sel" id="3">THREE</option>';
        a[b++] = '  </select>';
        a[b++] = '</div>';

        $(this.el).html(a.join(""));
    },

    events : {
        "click #select .sel":"changeNum"
    },

    changeNum : function(e){
        alert("You selected option "+$(e.currentTarget).attr("id"))
    }
});

Answer 1

与其监听 option 元素的点击，不如监听 select 元素的变化：

events: {
    "change #select":"changeNum"
}

然后在你的changeNum函数中你可以获得选择的选项：

changeNum: function(e) {
    alert("You selected option "+$(e.currentTarget).find('option:selected').attr('id'));
}

这是一个有效的 fiddle：https://jsfiddle.net/vt7t47br/

Backbone 单击事件未在 Google Chrome 中触发

Backbone click event not firing in Google Chrome

javascript

jquery

frontend

google-chrome

backbone.js