javascript - 使用 jQuery .on() 获取元素

Question

如果我像这样使用 jQuery 的 .on() 函数(还有更多内容，但这是提取的主要问题区域):

$(document).on("click", 
          $("#contcont a, #leftnav li a, #leftnav li ul a, #mainarea-home a").not(".secitem-mid a"),
    function clicker(event, sData) {

    var $this = $(this);

    sHREF = $this.attr("href");

    alert(sHREF);

} );

我未定义，那么实际获取正在单击的元素的最佳方法是什么？我需要 .on() 以便它总是发生，显然，而不是每次加载新数据时都必须将其附加到所有元素(这是通过 Yahoo! 商店进行的，因此有必要这样做就这样)。谢谢。

Answer 1

on 的第二个参数是一个选择器，而不是一个 jQuery 对象；它用于事件委托(delegate)。

如果您打算直接连接它们，那么:

$("#contcont a, #leftnav li a, #leftnav li ul a, #mainarea-home a").not(".secitem-mid a").on("click", function clicker(event, sData) {

    var $this = $(this);

    sHREF = $this.attr("href");

    alert(sHREF);

});

如果您确实想使用事件委托(delegate)，则 .not 部分会使事情变得有点棘手，因为(取决于您的标记)您可能必须在主系列中的每个选择器上重复它。因为这很丑陋，所以您最好稍后在处理程序函数中处理该特定情况:

$(document).on("click", "#contcont a, #leftnav li a, #leftnav li ul a, #mainarea-home a", function clicker(event, sData) {

    var $this = $(this);

    // Handle the "not" part
    if (!$this.is(".secitem-mid a")) {
        sHREF = $this.attr("href");

        alert(sHREF);
    }
});

不过，通常最好将您的委派 Root 于距离您要处理的元素最近的容器中。如果您的 #contcont、#leftnav 和 #mainarea-home 元素不是动态的，我会可能会考虑将委托(delegate) Root 于其中，而不是文档，例如:

$("#contcont"     ).on("click", "a:not(.secitem-mid a)", clicker);
$("#leftnav"      ).on("click", "li a:not(.secitem-mid a)", clicker);
$("#mainarea-home").on("click", "a:not(.secitem-mid a)", clicker);
function clicker(event, sData) { ... }

注意我只需要三个，而不是四个；您的 #leftnav li ul a 选择器已被 #leftnav li a 覆盖。

<小时/>

还有一点离题:请注意，您正在使用命名函数表达式，它可以是 tricky on IE8 and earlier 。上面的最后一个示例消除了这一点，将其改为函数声明。