1

我有一个这样的模板：

<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);
  },
  [...]

如果用户单击“编辑”文本，一切正常，但如果用户单击图标铅笔图标（标签的内容），则正确引发事件，但 e.target 指向 i 标签，并且不给了。

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

我可以解决它：

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);
},

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

4

2 回答 2

4

查看jQuery 的 $.closest() 方法：

edit: function(e) {
  e.preventDefault();
  var a = $(e.currentTarget).closest('a');
  var id = a.attr('model-id');
  app.edit(id);
},
于 2012-08-21T04:25:57.123 回答
1

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

edit: function(e) {
  e.preventDefault();

  var id = this.model.get("model.id");

  app.edit(id);
},

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

$(e.currentTarget).attr("title");
于 2012-09-20T14:04:54.890 回答