3

在我的重 ajax 代码中，我总是绑定“单击”主体标签并根据$(e.target)& 使用$.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()不能解决我的问题，因为它仍然返回跨度作为目标。此外，我正在寻找速度（在基于原子的触摸设备上运行）& live 似乎更慢（两次）：http: //jsperf.com/bind-vs-click/3

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

4

3 回答 3

2

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

});​

实时复制

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

有点离题，但最新版本的 jQuery 会通过live（它基本上完成你所做的事情，在主体上挂钩一个事件，然后查看它发生在哪个实际元素上，将选择器应用于元素匹配）和delegate（相同live但植根于特定元素而不是文档本身）。

于 2010-12-21T16:23:01.603 回答
2

为什么不使用live适合您的方法呢？

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

该live方法绑定到 body 元素并根据选择器检查事件目标。

jQuery：现场直播

于 2010-12-21T16:26:36.160 回答
0

我认为您这样做是因为bind不适用于在 AJAX 调用之后插入的内容。我建议您使用live来附加您的事件并允许 jQuery 来处理它。

于 2010-12-21T16:24:13.710 回答