1

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

$(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! 存储，所以有必要这样做）。谢谢。

4

2 回答 2

7

的第二个参数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 和更早版本上可能会很棘手。我上面的最后一个示例消除了这一点，而是将其作为函数声明。

于 2012-07-09T15:17:04.243 回答
0

ON 方法也可以在没有委托的情况下使用。如果页面加载后没有添加内容，可以使用以下代码选择元素：

var elements = $('#contcont a, #leftnav li a, #leftnav li ul a, #mainarea-home a').not('.secitem-mid a');

下面做一些事件处理：

$(elements).on('click', function() {
    //do something
});
于 2012-07-09T15:29:39.307 回答