There’s nothing more frustrating than having to deal with closures in JavaScript. There are numerous workarounds, but the most common one in use by most developers right now is to create an anonymous function and an intermediate anonymous function that handle whatever was intended to be run inside the loop. For the most part, these solutions work great; they do have a drawback though. Since there’s the requirement to create two additional functions per call, the browser is effectively calling three functions per iteration, rather than just a single function we typically use.

Using jQuery’s event.data object, we can easily achieve a closure on any loop which is linked to an event in jQuery. After the jump, I’ll show you how I usually handle closure in jQuery when I need to iterate a loop and apply numerous click() or similar events to that object. Trust me, it’s far cleaner than using the typical anonymous functions so common in web development these days.