title: Binding same function to window resize event with different arguments
body: <p>I am making a simple JS plugin to resize objects vertically.  It works fine until the resize event - wherein <code>$flexParent</code> appears to be being set as the last <code>$flexParent</code> in the initial <code>.each()</code> function for all of the binds.  So for three 'flexParents' being passed to the plugin, only the last one is getting acted on on the resize event; just 3 times. Obviously I'm misunderstanding binding here but I'd be grateful of some clarity!</p>
  
  <pre>
  (function($){
      $.fn.flexHeight = function(options) {
  
          if (!options){options = {};}
          var settings = $.extend({
              boxes: false
          }, options);
  
          function main(flexParent) {
              var $flexParent = flexParent;
              if (settings.boxes) {
                  $children = $flexParent.find(settings.boxes);
              } else {
                  $children = $flexParent.children
              }
              var maxHeight = 0;
  
              $children.each(function() {
                  $(this).height('auto');
              });
  
              $children.each(function() {
                  maxHeight = maxHeight > $(this).outerHeight(false) ? maxHeight : $(this).outerHeight(false);
              });
  
              $children.each(function() {
                  $(this).height(maxHeight);
              });
          }
  
          return this.each(function() {
              $flexParent = $(this);
              main($flexParent);
              $(window).resize(function() {
                  main($flexParent);
              });
          });
      }   
  }(jQuery));
  </pre>