How to use jQuery this with .on function and .each function

Question

I am using jQuery each function and on click on current i.e $(this) I am executing JS code, It will be more clear if you look on following code

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

Please tell me correct way of use "this" with ".on" inside ".each" function.

Thank you.

Attaching handlers in jquery loops implicitly through your selected elements. You don't need to use each. — kinakuta
– kinakuta, Commented Sep 30, 2014 at 16:25
What you have is not common but also not incorrect. Why do you think you are not using this correctly? — Felix Kling
– Felix Kling, Commented Sep 30, 2014 at 16:28
There's no issue in your code. If you're experiencing an actual problem, you need to ask specifically about the issue. — user1106925
– user1106925, Commented Sep 30, 2014 at 16:32

iCollect.it Ltd · Accepted Answer · 2014-09-30 18:02:31Z

4

1. Short answer: There is no need for the each:

Do not use click inside of each... you do not need to with jQuery. It handlers collections automatically for most operations (including event handlers):

e.g.

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

2. Try a delegated handler:

It is often more convenient to use a single delegated event handler (attached to the nearest non-changing ancestor element, or document if none is handy). The best feature of delegated events is that they can work on elements that do not even exist yet! :)

The run-time overhead is quite low as they only need to apply the selector to the elements in the bubble-chain. Unless you are processing 50,000 mouse operations per second the speed difference is negligible, so for mouse events, don't be put of by ridiculous claims of inefficiency (like the down-voter's ranting below). The benefits usually out-way any extra overhead. Nobody clicks 50,000 times per second!:

e.g.

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

Delegated events work by listening for events (in this case click) bubbling up the DOM to a non-changing ancestor element. It then applies the selector. It then calls the function on each matching element that caused the event.

The closer the non-changing element is to the elements in question the better, to reduce the number of tests required, but document is your fall-back if nothing else is convenient. Do not use body as it has problems relating to styling that means events may not fire.

edited Sep 30, 2014 at 18:02

answered Sep 30, 2014 at 16:24

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1106925 Over a year ago

Delegating events to the document is not more efficient. They got rid of .live() because people were delegating all their events that way. If delegation is used, it should be kept as local as possible.

user1106925 Over a year ago

Please research? Have you studied the code of jQuery's event system? Please don't try to condescend. What does "...they only need to apply to the elements in the bubble-chain" mean? That doesn't make sense. What it has to do is after the event bubbles up to the document, it has to go back to the event.target, manually bubble up to the document and run an .is() operation on every element in between to see if it matches the selector. And it has to do it for every selector provided. It is not at all efficient.

user1106925 Over a year ago

Nope, no agreement. The claim that it is more efficient is spurious. Just because you can minimize the concern of computational overhead and not do so with the memory overhead of binding the same handler to multiple elements doesn't meant that you've demonstrated anything convincing.

user1106925 Over a year ago

...I love it how people look at one example of inefficient code and say it's too small to make a difference, but then they fail to grasp the cumulative effect of using the same or similar inefficient practices everywhere in their code. Yep, if that's the only code on the page, then sure, no problem.

user1106925 Over a year ago

Ah yes, I must have just been offended since you couldn't possibly be rightfully corrected. I'm satisfied with my vote placement. Given a page that has only 10 click handlers bound, and a user clicks somewhere on an element nested 10 levels deep, the .is() is going to run 100 times, even if the click took place where there was no targeted element. Nope, can't see suggesting that to people.

|

aemonge · Accepted Answer · 2014-09-30 16:29:23Z

-1

@TrueBlueAussie had the correct answer. You should use a single delegated event.

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

Still if you want to keep your "this" scope, you may

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

answered Sep 30, 2014 at 16:29

aemonge

2,3471 gold badge24 silver badges29 bronze badges

2 Comments

iCollect.it Ltd Over a year ago

The bind is not needed. It will register correctly as-is on each separate element (works, just really wasteful).

Ragnar Over a year ago

You can use a shortest way: $(this).click(function( e ){});

Collectives™ on Stack Overflow

How to use jQuery this with .on function and .each function

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related