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

Question

我正在使用 jQuery 每个函数，点击当前即 $(this) 我正在执行 JS 代码，如果你看下面的代码会更清楚

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

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

谢谢。

Answer 1

<强>1。简短回答:不需要each:

不要在each内部使用click...您不需要使用jQuery。它会自动处理大多数操作的集合(包括事件处理程序):

例如

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

<强>2。尝试委托(delegate)处理程序:

使用单个委托(delegate)事件处理程序通常更方便(附加到最近的不变祖先元素，或者如果不方便的话附加到document)。委托(delegate)事件的最佳功能是它们可以处理尚不存在的元素! :)

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

例如

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

委托(delegate)事件通过监听事件(在本例中为 click)来工作，该事件将 DOM 冒泡到不更改的祖先元素。然后应用选择器。然后它在引发事件的每个匹配元素上调用该函数。

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