jquery $("button","#container") 和 $("#container button") 和类似用法有什么区别？答案

【问题标题】：What is differences between jquery $("button","#container") and $("#container button") and similar usages?jquery $("button","#container") 和 $("#container button") 和类似用法有什么区别？
【发布时间】：2012-02-16 23:15:18
【问题描述】：

事件分配样式之间有什么区别？例如：

$("button","#container").click(function(){
    console.log("Usage 1");
});

$("#container").click("button",function(){
    console.log("Usage 2");
});

$("#container button").click(function(){
    console.log("Usage 3");
});

$(document).click("#container button",function(){
    console.log("Usage 4");
});

http://jsfiddle.net/mesuutt/8Dkcc/2/

【问题讨论】：

见这里：Comparing the performance of $(“#foo .bar”) and $(“.bar”, “#foo”)
你在stackoverflow.com/questions/8598759/… 有答案，正如 Vidas 所说的那样。
我很惊讶语句 2 和 4 有效。 API 没有提到将选择器传递给 click()...

标签： jquery

【解决方案1】：

$("button","#container").click(function(){
    console.log("Usage 1");
});

这将在#container 中查找button 元素，并在它找到的每个button 元素上附加一个click 事件处理程序。

$("#container").click("button",function(){
    console.log("Usage 2");
});

这会将click 事件处理程序附加到#container，并将“按钮”字符串作为事件数据传递给click 事件处理程序。

$("#container button").click(function(){
    console.log("Usage 3");
});

这将与您的第一个代码 sn-p 相同。

$(document).click("#container button",function(){
    console.log("Usage 4");
});

这将在整个document 上附加click 事件处理程序，并将“#container button”字符串作为事件数据传递给click 事件处理程序。

【讨论】：

【解决方案2】：

语句 2 和 4 没有在 jQuery 文档中指定，所以我们可以忽略它们。至于语句 1 和 3，它们将点击处理程序绑定到各个按钮 - 它们都实现了相同的功能。

我的建议是使用事件委托：

$( container ).on( 'click', 'button', function () { ... });

其中container 是对#container 元素的引用。（您希望在页面加载时获取对静态元素的引用，这样您就不必每次需要它们时都查询它们。）

【讨论】：