title: jQuery (and others) event handler wrapper conundrum
body: <p><strong>UPDATED AT THE BOTTOM</strong></p>
  <p><em><strong>ORIGINAL</strong></em></p>
  <p><a href="http://jsfiddle.net/rXx6d/" rel="nofollow noreferrer">Here is a jsfiddle</a> that shows my problem. I will describe the problem in a moment. This is the code, since SO wants me to paste it:</p>
  <p><strong>HTML</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;input class=&quot;on&quot; value=&quot;on&quot; type=&quot;button&quot; /&gt;
  &lt;input class=&quot;off&quot; value=&quot;off&quot; type=&quot;button&quot; /&gt;
  &lt;div class=&quot;subject&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p><strong>JS</strong></p>
  <pre class="lang-js prettyprint-override"><code>(function($) {
      var wrap = function(func) {
          return function(e) {
              console.log('click some special logic');
              func.apply(this, [].slice.call(arguments,0));
          };
      };
      
      function generic_click_func(e) {
          console.log('generic click called');
      };
      
      function generic_mouseover_func(e) {
          console.log('generic mouseover called');
      };
      
      function generic_mouseout_func(e) {
          console.log('generic mouseout called');
      };
      
      $('.on').on('click', function() {
          $('.subject').on('click', wrap(generic_click_func))
              .on('mouseover', wrap(generic_mouseover_func))
              .on('mouseout', wrap(generic_mouseout_func));
      });
      $('.off').on('click', function() {
          $('.subject').off('click', wrap(generic_click_func))
              .off('mouseover', wrap(generic_mouseover_func))
              .off('mouseout', wrap(generic_mouseout_func));
      });
  })(jQuery);
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre class="lang-css prettyprint-override"><code>.subject { height:20px; width:20px; background-color:#ff0000; }
  </code></pre>
  <p><strong>ISSUE</strong></p>
  <p>The problem with my code is that when <code>wrap()</code> is called, even with the same <code>func</code> param, the resulting function is a new version of the function. Thus when compared to a previous resulting function with the same <code>func</code> param, it is not equal. The jsfiddle demonstrates this.</p>
  <p>In the fiddle, we call <code>wrap(somefunction)</code> in two places, once for <code>.on()</code> and once for <code>.off()</code>, yet the resulting function of each call is considered a different function when compared to the other. This is techinically correct, because the <code>wrap()</code> function returns a <em>new function</em> each time it is called. Thus when calling the <code>.on()</code> function with this <code>wrap(somefunction)</code> param, and then later calling <code>.off()</code> with the same param (not the same i know), the <code>.off()</code> function does not find the function in the list (because of the method of comparison), and thus the handler is not removed.</p>
  <p>I understand that if I was in control of the function comparison code, I could do something like this:</p>
  <pre class="lang-js prettyprint-override"><code>if (''+func1 == ''+func2) { remove_handler(ele, func2); };
  </code></pre>
  <p>But alas, I am not, because this is part of jQuery. Specifically, it is part of the <code>inArray()</code> function, since that is what jQuery uses to remove event handlers, which is again correct, because <code>inArray()</code> has a multipurpose, where string comparisons are not always needed.</p>
  <p><strong>WHAT I NEED</strong></p>
  <p>I need a workaround for this problem, such that I can have a wrapping function like <code>wrap</code> that returns a wrapper of the <code>func</code> param, which can later be compared to another wrapped function that was created using the exact same code, and be equal according to jQuery, so that the <code>.off()</code> function can actually remove it. The jsfiddle is an exact example of what is going on. What I need is for the <code>.off()</code> functions to actually work, while maintaining the wrapper function sequence.</p>
  <p>SIDE NOTE: in the example code I added <code>mouseover</code> and <code>mouseout</code> events to simply demonstrate that this wrapper function is a multipurpose, completely reusable piece of code, that is not exclusive to the <code>click</code> event. For that matter, it is not exclusive to a single element. It needs to work for multiple elements on the page, and multiple events for each element.</p>
  <p><em><strong>UPDATE</strong></em></p>
  <p>After an insightful comment from Andrew, I got this to work by simply taking advantage of the jQuery namespacing ability. This solves the problem for jQuery events; however, I have the exact same problem with the RaphaelJS <code>.click()</code> and <code>.unclick()</code> functions. Can anyone offer help with that? Here is a <a href="http://jsfiddle.net/loushou/rXx6d/1/" rel="nofollow noreferrer">new jsfiddle</a> that demonstrates the same problem using RaphaelJS.</p>