如何将 jQuery this 与 .on 函数和 .each 函数一起使用答案

【问题标题】：How to use jQuery this with .on function and .each function如何将 jQuery this 与 .on 函数和 .each 函数一起使用
【发布时间】：2014-10-01 02:02:31
【问题描述】：

我使用 jQuery 每个函数并单击当前即 $(this) 我正在执行 JS 代码，如果您查看以下代码会更清楚

$('.switch-cal').each(function(){
    $(this).on( 'click', function( e ){
         ....  CODE HERE ....

请告诉我在“.each”函数中使用“this”和“.on”的正确方法。

谢谢。

【问题讨论】：

在 jquery 中附加处理程序会隐式地通过您选择的元素。您不需要使用每个。
你所拥有的并不常见，但也不错误。为什么你认为你没有正确使用this？
您的代码没有问题。如果您遇到实际问题，则需要具体询问该问题。

标签： javascript jquery

【解决方案1】：

1.简短回答：不需要each：

不要在each 内使用click...你不需要使用jQuery。它为大多数操作（包括事件处理程序）自动处理集合：

例如

$('.switch-cal').click(function(){
    //$(this) is the calendar clicked
         ....  CODE HERE ....

2。尝试委托处理程序：

使用单个委托事件处理程序通常更方便（附加到最近的不变祖先元素，或者document，如果没有方便的话）。委托事件的最大特点是它们可以处理甚至还不存在的元素！ :)

运行时开销非常低，因为它们只需要将选择器应用于气泡链中的元素。除非您每秒处理 50,000 次鼠标操作，否则速度差异可以忽略不计，因此对于鼠标事件，不要因效率低下的荒谬说法而被搁置（就像下面投票者的咆哮）。好处通常超过任何额外的开销。 没有人每秒点击 50,000 次！：

例如

$(document).on('click', '.switch-cal', function(){
    //$(this) is the calendar clicked
         ....  CODE HERE ....

委托事件通过监听事件（在本例中为click）来工作，该事件将 DOM 冒泡到一个不变的祖先元素。它然后应用选择器。它然后在导致事件的每个匹配元素上调用函数。

不变的元素越接近有问题的元素越好，以减少所需的测试次数，但如果没有其他方便的话，document 是你的后备。不要使用body，因为它存在与样式相关的问题，这意味着事件可能不会触发。

【讨论】：

将事件委托给document 效率并不高。他们摆脱了.live()，因为人们以这种方式委派所有他们的活动。如果使用委托，则应尽可能保持本地化。
请研究一下？你研究过jQuery的事件系统的代码吗？请不要试图居高临下。 "...它们只需要应用于气泡链中的元素" 是什么意思？那没有意义。它必须做的是在事件冒泡到document 之后，它必须回到event.target，手动冒泡到document 并在其间的每个元素上运行.is() 操作以查看如果它匹配选择器。它必须为 every 提供的选择器执行此操作。它根本没有效率。
不，不同意。声称它更有效的说法是虚假的。仅仅因为您可以最大程度地减少计算开销的问题，而不是将同一个处理程序绑定到多个元素的内存开销，这并不意味着您已经展示了任何令人信服的东西。
...我喜欢人们如何看待一个低效代码示例并说它太小而无法产生影响，但是他们无法掌握使用相同或类似低效实践的累积效应在他们的代码中无处不在。是的，如果这是页面上唯一的代码，那么当然，没问题。
啊，是的，我一定是被冒犯了，因为你不可能得到正确的纠正。我对我的投票位置感到满意。给定一个仅绑定 10 个单击处理程序的页面，并且用户单击嵌套 10 层深度的元素上的某处，.is() 将运行 100 次，即使单击发生在没有目标元素的位置。不，看不到向人们建议。

【解决方案2】：

@TrueBlueAussie 得到了正确答案。您应该使用单个委托事件。

$(document).on('click', '.switch-cal', function(){ //$(this) is the calendar clicked .... CODE HERE ....

如果你想保持你的“this”范围，你可以

$('.switch-cal').each(function(){ $(this).on( 'click', function( e ){ .... CODE HERE .... }.bind(this)) });

【讨论】：

不需要bind。它将在每个单独的元素上按原样正确注册（有效，真的很浪费）。
可以用最短的方式：$(this).click(function(e){});