Question

只是想知道是否有一种方法可以让jquery在点击时截取链接。问题是，首次加载页面时，我的页面上的某些链接未加载。我有一个模糊的回忆，听说jquery有办法拦截所有当前和未来的链接。这是我的代码。它适用于开始时所有链接，但稍后加载到页面上的链接不会被此函数拦截

$('a').trackClick({
        areaClick: function(element) { return getAreaClicked(element); },
        href: function(element) { return getHrefFromElement(element); },
        text: function(element) { return getTextFromElement(element); },
        exceptions: function(element) { return isException(element); }
    });

Answer 1

[编辑：我偶尔会对这个答案进行投票，所以我希望用更新的（截至2015年5月）实践更新它：

根据我的原始答案，委派听众是一种更好的做法。 jQuery的当前“最佳实践”语法是.on()。它只是顺序不同，对我而言在语义上更直观：

$('#parent').on('click', 'a', function(event) {
  event.preventDefault();
  // do the rest of your stuff
}

我的原始答案的其余部分仍然适用。

如果您不想使用默认点击行为，则还需要停止事件冒泡。我更喜欢委托代表，所以这是我的建议：

$('#parent').delegate('a', 'click', function(event) {
  event.preventDefault();
  // do the rest of your stuff
});

“＃parent”只是一个样本。您将使用任何适当的选择器，它将成为锚标签的永久祖先。甚至可以上升到“身体”，但通常一些描述的包装ID也可以。

[编辑：我最近看到了一个upvote，这意味着有人会看到这个答案。应该注意，.live()现已弃用，虽然支持.delegate()，但官方建议的语法是.on()用作委托人：

$('#parent').on('click', 'a', function(event) {
  event.preventDefault();
  // do the rest of your stuff
});

Answer 2

你需要jquery Live看到这里：http://api.jquery.com/live/

    $('a').live('click', function(e){

var element  = $(this);
var data = {areaClick: function(element) { return getAreaClicked(element); },
            href: function(element) { return getHrefFromElement(element); },
            text: function(element) { return getTextFromElement(element); },
            exceptions: function(element) { return isException(element); }
}
    trackClick(data);

    });

Answer 3

使用jQuery的live事件处理程序：

$('a').live('click', function() {
    ...
});

Answer 4

最简单的选择是使用jQuery的live()方法，尽管这相当昂贵。如果可能的话，delegate()是一个更好的选择，这里有几个帖子描述了两者之间的区别：

Jquery live() vs delegate()
jQuery: live() vs delegate()

通常，最好的选择是简单地将您需要的任何内容绑定到通过AJAX加载的新<a>元素。例如：

$.ajax({
   url: 'http://example.com'
   type: 'GET'
   data: 'whatever'
   success: function(data){
      //after inserting the response somewhere...
      $('.insertedContent').find('a'.trackClick({
        areaClick: function(element) { return getAreaClicked(element); },
        href: function(element) { return getHrefFromElement(element); },
        text: function(element) { return getTextFromElement(element); },
        exceptions: function(element) { return isException(element); }
      });
   }
}

Answer 5

如前所述，推荐.live()和.delegate()的答案为out of date。

我遇到了类似的问题：我已经在各种元素上使用了各种点击处理程序，但是我想添加一个额外的点击处理程序来捕获所有内容并可能在其他元素之前采取行动。

我的用例是希望网络应用中的各种工具在点击其他工具时“重置”为默认状态。

这是我的解决方案......

$(document).on("click", function(e){
    // This catches all clicks.
    // It can be suppressed if the target uses e.stopPropagation()
});

// To start the bubbling from an element "higher" than the document,
// then use delegation, e.g.:
// $(document).on("click", ".your_class", function(e){ etc })
// This can be really useful if you only have one sensitive area in the layout,
// or you want different "master" click behaviours for different areas!

$("#my_element").on("click", function(e){
    // prevent the default action, e.g. prevent "#" navigation on <a href="#">
    e.preventDefault();
    // prevent the click bubbling to the $(document) handler
    e.stopPropagation();
    // now do my stuff
    // ...
});

$("#my_other_element").on("click", function(e){
    // prevent the default action, e.g. prevent "#" navigation on <a href="#">
    e.preventDefault();
    // this time I want the "catch all" to fire
    // so I don't do stopPropagation()
    // now do my stuff
    // ...
});

拦截所有当前和未来的链接

5 个答案: