使用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对象; 它用于事件委托.

如果您打算直接挂钩,那么:

$("#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);

});

如果你真的想要使用事件委托,那么这部.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);
    }
});

但另外,通常最好将你的代表团置于最靠近你想要处理的元素的容器中.如果你的#contcont,#leftnav和#mainarea-home元素不是动态的,我可能会考虑在其中生成委托而不是document,例如:

$("#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.

还有一点偏离主题:要注意你正在使用一个命名函数表达式,这在IE8及更早版本中可能会很棘手.我上面的最后一个例子废除了它,使它成为一个函数声明.