Backbone视图顶级标签绑定点击事件失效问题求助

问题分析 #

你遇到的这个问题其实有两个核心原因：

1. 浏览器对<option>标签的click事件支持很差：绝大多数浏览器里，点击<option>时并不会触发它自身的click事件，而是直接触发<select>的change事件——这是浏览器原生的交互逻辑，和Backbone无关。
2. 事件选择器写错了：你的视图根元素就是带.setPageSize类的<option>，所以'click .setPageSize'是在根元素内部查找匹配元素，自然找不到，正确的写法应该是直接写'click'（绑定到根元素本身），但即使改了这个，也解决不了第一个问题。

解决方案 #

最合理的做法是在管理<select>的父视图里监听change事件，而不是在单个<option>视图里绑定click。下面是具体的代码调整：

1. 修改子视图PageSize

去掉不必要的事件绑定，专注于渲染<option>即可：

var PageSize = Backbone.View.extend({
  tagName: 'option',
  className: "setPageSize",
  initialize: function(options) {
    this.value = options.value;
    this.text = options.text;
  },
  render: function() {
    // 直接给option设置value和文本，比模板更简洁
    this.$el.attr('value', this.value).text(this.text);
    return this;
  },
  // 保留你的setPageSize方法，后续可以被父视图调用
  setPageSize: function() {
    console.log(this.value);
  }
});

module.exports = PageSize;

2. 在父视图（管理<select>的视图）中处理交互

假设你的父视图是用来渲染整个<select>的，那就在这里监听change事件，获取选中值并调用对应子视图的方法：

var PageSizeSelect = Backbone.View.extend({
  tagName: 'select',
  initialize: function() {
    // 存一下子视图实例，方便后续查找
    this.childViews = [];
    this.render();
  },
  render: function() {
    // 示例数据，你可以换成自己的数据源
    var sizeOptions = [
      {value: 10, text: '10条/页'},
      {value: 20, text: '20条/页'},
      {value: 50, text: '50条/页'}
    ];

    sizeOptions.forEach(opt => {
      var pageSizeView = new PageSize(opt);
      this.childViews.push(pageSizeView);
      this.$el.append(pageSizeView.render().el);
    });

    return this;
  },
  events: {
    // 监听select的change事件
    'change': 'onPageSizeChange'
  },
  onPageSizeChange: function(e) {
    var selectedValue = $(e.target).val();
    // 找到对应的子视图实例
    var targetView = this.childViews.find(view => view.value == selectedValue);
    if (targetView) {
      // 调用子视图的setPageSize方法
      targetView.setPageSize();
    }
  }
});

为什么这样做更合理？ #

• 符合浏览器的原生交互逻辑：用户选择选项时，浏览器本来就会触发<select>的change事件，这是最可靠的监听方式。
• 避免了Backbone事件委托的误区：Backbone的事件委托是绑定在视图根元素上的，但<option>的特殊性导致它的click事件无法被正确捕获。
• 父子视图职责清晰：子视图只负责渲染单个选项，父视图负责整体的交互逻辑，代码更易维护。

内容的提问来源于stack exchange，提问作者IanCZane