div中项目的jQuery单击事件处理程序答案

【问题标题】：jquery click event handler for items within a divdiv中项目的jQuery单击事件处理程序
【发布时间】：2011-10-01 05:18:56
【问题描述】：

如何为 div 中的一堆链接添加 jquery click 事件处理程序？例如：

<div class="test">
<a href="test1.html">link 1</a>
<a href="test2.html">link 2</a>
<a href="test3.html">link 3</a>
</div>

我想为三个链接中的每一个添加一个点击事件处理程序，这样我就可以将Class('selected') 添加到被点击的链接，并从其余链接中删除Class('selected')。

我知道我可以一个一个地做，但我想知道最干净的方法是什么......

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我会使用.delegate():

var classname = 'selected';

$('div.test').delegate('a', 'click', function ()
{
    $(this).addClass(classname).siblings().removeClass(classname);
});

【讨论】：

为什么选择委托（）？他没有说要在 DOM 中添加更多的“div.test a”？
一般来说，最好绑定更少的事件处理程序。旧版本的 IE 和移动浏览器对此表示赞赏。
这和$('div.test a').bind('click', function [etc]);有什么不同吗？
@Matt - 我认为“或在未来”是一个很大的区别，但“对于与选择器匹配的所有元素”表明（对我而言）你不会得到更少的事件处理程序这种方式与'div.test a'
@StephenP .delegate() 通过将单个事件侦听器绑定到选定元素来工作。这就是“未来”部分的实现方式——它利用了事件冒泡。非常类似于.live():stackoverflow.com/questions/6801070/how-does-jquery-live-work

【解决方案2】：

选择器将返回匹配的元素数组。

$('div.test a')

将是树链接。

$('div.test a').click(function() { });

将绑定到所有三个。

【讨论】：

【解决方案3】：

选择器的工作方式与 CSS 选择器类似，因此这会在 test 类的标签内选择 a 标签

$('.test a').click(function(){

    // select the object that was clicked on
    $(this)
        // add the selected class to it
        .addClass('selected')
        // remove the selected class from it's brothers and sisters
        .siblings().removeClass('selected')

    // stop link from loading and resetting page
    return false

})

在这里演示：http://jsfiddle.net/HK6CE/

【讨论】：

【解决方案4】：

我会写（没有额外的标记）：

$('.test a').bind('click', function() {

$(this).addClass('selected').siblings().removeClass('selected');

});

Siblings() 获取同一级别的所有其他 dom 元素，因此它将获取 .test 中的所有其他“a”

【讨论】：

【解决方案5】：

我相信是$('.test').each(function(){})

【讨论】：