Creating a jQuery plugin to cause individual elements to react when the window is resized. How do I handle the listeners?
<p>I'm working on a plugin that causes something to happen in selected elements when the window is resized. The logic on what happens is perfectly fine, but I'm running into a conundrum when it comes to where to hook on the event listeners.</p>

<p>Basically, the code looks something like this:</p>

<pre><code>$.fn.beAwesome = function() {
  return this.each(function(){
    // ???
  });
}
</code></pre>

<p>While I've completed the rest of the plugin (and have it working just fine on, say, a click even on <code>this</code>), I can't put it "all together" without solving this central issue.</p>

<p>I considered just adding an extra bind <code>resize</code> to <code>$(window)</code> for each awesome element, but there'd be no way to access the element from within the closure:</p>

<pre><code>$.fn.beAwesome = function() {
  $window = $(window);
  return this.each(function(){
    $window.resize(function(){
      // can't access initial awesome element
    });
  });
}
</code></pre>

<p>The other solution that sprung to mind was to instantiate a global data store (probably in <code>$(document).data('beAwesome')</code> or something like that. This, however, doesn't seem Javascript-like, blocking off access once the function runs its course, so I'd have to come up with some roundabout ways to do things like removing the hook. I've definitely seen approaches like these in Javascript libraries I've used in the past, but I don't know whether that's due to necessity or laziness on the authors' parts.</p>

<p>So is there an effective way to accomplish what I'm looking for?</p>
