我有一个这样的模板:
<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标签,而不是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);
},
但我想知道是否有更好,更优雅和通用的方法来实现它......
答案 0 :(得分:4)
查看jQuery's $.closest() method:
edit: function(e) {
e.preventDefault();
var a = $(e.currentTarget).closest('a');
var id = a.attr('model-id');
app.edit(id);
},