Question

在我的重ajax代码中，我总是绑定“点击”身体标签＆amp;行动取决于$(e.target)＆amp;使用$.fn.hasClass()。但是当我点击里面有</span>标签的锚时，我的$(e.target)等于这个节点，而不是我想要的父锚。

从现在开始，我使用了这个技巧（var $t = $(e.target);）：

/** bubbling **/
if($t.get(0).tagName !== "A" && $t.get(0).tagName !== "AREA") {
    $t = $t.parent("a");
   if(empty($t)) return true;
   //else console.log("$t.bubble()", $t);
}

以某种方式感觉不对......你有更好的实施吗？

$.fn.live()无法解决我的问题，因为它仍然会将范围作为目标返回。此外，我正在寻找速度（在基于原子的触摸设备上运行）＆amp;现场似乎慢一点（两次）：http://jsperf.com/bind-vs-click/3

事实上，正如@Guffa指出的那样，使用$.fn.live()解决了跨度冒泡问题，因为我不再需要event.target了。我想这里没有其他“正确”的答案（在容器上使用bind）。

Answer 1

closest在这里很有用（尽管其他方法 - live和delegate - 如下所述）：

$t = $t.closest('a');

从$t开始，向上通过父元素链向上，直到找到一个匹配给定的选择器 - 在这种情况下为“a”。

这是一个基本的例子：

HTML：

<a href='#'><span>Outer span <span>inner span <em>em</em></span></span></a>

使用jQuery的JavaScript：

jQuery(function($) {

  $(document).click(function(e) {
    var $t = $(e.target).closest('a');
    $t.css("border", "1px solid black");
    return false;
  });

});

Live copy

点击该链接可在链接周围添加边框，无论您是单击其中一个跨度还是em元素或其中任何位置。

有点偏离主题，但最近版本的jQuery通过live为你处理这个问题（基本上做你做的事情，在主体上挂钩一个事件，然后查看它发生了什么实际元素，应用元素匹配的选择器）和delegate（与live相同，但是根植于特定元素而不是文档本身）。

Answer 2

为什么不使用为您执行此操作的live方法？

$('a.someclass').live('click', function(){
  // do something
});

live方法绑定到body元素，并针对选择器检查事件目标。

jQuery: live

Answer 3

我认为你这样做是因为bind对AJAX调用后插入的内容不起作用。我建议您使用live附加事件并允许jQuery处理此事。

jQuery e.target冒泡最佳实践？

3 个答案: