JQuery Event Handler created in loop?

This is a very common issue people encounter.

This is a very common issue people encounter. JavaScript doesn't have block scope, just function scope. So each function you create in the loop is being created in the same variable environment, and as such they're all referencing the same I variable.To scope a variable in a new variable environment, you need to invoke a function that has a variable (or function parameter) that references the value you want to retain.

In the code below, we reference it with the function parameter j. // Invoke generate_handler() during the loop.It will return a function that // has access to its vars/params. Function generate_handler( j ) { return function(event) { switchBanners(j, true); }; } for(var I = 1; I The variable environment of the returned function will exist as long as the function exists, so it will continue to have reference to any variables that existed in the environment when/where it was created.

UPDATE: Added var before I to be sure it is declared properly.

Did the job! Thanks a BUNCH! I knew it had to do with variable scope, just could figure out how to work around it!

;) – Ryan Erb Oct 14 at 23:47 @RyanErb: You're welcome. – user113716 Oct 15 at 0:19.

Instead of doing something this .. emm .. reckless, you should attach a single event listener and catch events us they bubble up. Its called "event delegation". Some links: davidwalsh.name/event-delegate net.tutsplus.com/tutorials/javascript-aj... sitepoint.com/javascript-event-delegatio... lab.distilldesign.com/event-delegation/ Study this.It is a quite important thing to learn about event management in javascript.

Makes sense... Sorta... lol... I need to look into this deeper but the general concept I like, MUCH cleaner. I need to play with this more in the future as I do many things like this. Got to love the add more and it picks up the features!

– Ryan Erb Oct 15 at 0:02.

It's because I isn't evaluated until the click function is called, by which time the loop has finished running and I is at it's max (or worse overwritten somewhere else in code). Try this: for(i = 1; I Attr('id'). Replace('slider-', ''), true); }); } That way you're getting the number from the id of the element that's actually been clicked.

It works better... I may have to look elsewhere to see where its breaking now... basically the switchBanners() function changes direction of it left and right based on its current position... its not moving back to where it came from with this either... BUT this fixes it to move it the first time left to right... but it won't move right to left on the second click – Ryan Erb Oct 14 at 23:42.

I'm with tereško : delegating events is more powerful than doing each click "on demand" as it were. Easiest way to access the whole group of slider elements is to give each a shared class. Let's say, "slider" Then you can delegate a universal event to all ".

Slider" elements: $(function() { $('body'). Delegate('. Slider', 'click', function() { var sliderSplit = this.id.

Split('-'); // split the string at the hyphen switchBanners(parseInt(sliderSplit1), true); // after the split, the number is found in index 1 }); }); Liddle Fiddle: http://jsfiddle.net/2KrEk/ I'm delegating to "body" only because I don't know your HTML structure. Ideally you will delegate to the closest parent of all sliders that you know is not going to be destroyed by other DOM manipulations. Often ome sort of wrapper or container div.

GREAT explanation! – Ryan Erb Oct 15 at 1:15.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.