【问题标题】:Backbone: getting the view element that triggered an eventBackbone:获取触发事件的视图元素
【发布时间】:2025-12-13 19:20:03
【问题描述】:

我有一个这样的模板:

<a class="btn btn-info btn-small edit"  model-id="<%= model.id %>" href="">
  <i class="icon-pencil icon-white"></i>
  edit
</a>

还有这样定义的视图:

src.views.WinesView = Backbone.View.extend({
  [...]
  events: {
    'click a.edit': 'edit'
  },

  edit: function(e) {
    e.preventDefault();
    var a = $(e.target);
    var id = a.attr('model-id');
    app.edit(id);
  },
  [...]

如果用户点击“编辑”文本,一切正常,但如果用户点击 icon-pencil 图标(标签的内容),事件会正确引发,但 e.target 指向 i标签,而不是a。

事实上,我想要的是,如果我绑定到的标签中的任何标签触发了一个事件,我希望引发该事件并轻松获得对我从主干绑定的元素的引用...

我可以解决它:

edit: function(e) {
  e.preventDefault();
  var a = $(e.target);
  if (a[0].tagName!=='A') { a = a.parent(); }
  var id = a.attr('model-id');
  app.edit(id);
},

但我想知道是否有更好、更优雅和通用的方式来实现它...

【问题讨论】:

  • e.currentTarget 内部回调为您提供 冒泡事件的 dom 元素
  • 非常感谢 Deeptechtons,请把它作为一个回答,以便我可以标记是正确的...
  • 请通过 flyingnude 投票并标记现有答案,它运作良好
  • 已经为您的评论点赞...

标签: jquery backbone.js jquery-selectors jquery-events


【解决方案1】:

查看jQuery's $.closest() method

edit: function(e) {
  e.preventDefault();
  var a = $(e.currentTarget).closest('a');
  var id = a.attr('model-id');
  app.edit(id);
},

【讨论】:

    【解决方案2】:

    您可以使用这种方式从模型中获取属性值

    edit: function(e) {
      e.preventDefault();
    
      var id = this.model.get("model.id");
    
      app.edit(id);
    },
    

    如果您需要从元素中获取 HTML 属性

    $(e.currentTarget).attr("title");
    

    【讨论】:

      最近更新 更多