title: Override/Intercept all jQuery functions
body: <p>I was trying to override all jQuery functions to perform an action whenever jQuery was called (for auditing purposes or other reasons). However I probably need to get the same parameters a function receives in order to make the following code work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function __wrapjQuery () {
    var wrapper = this;
  
    
    alert('Wrapping');
      
       
    var functions = Object.getOwnPropertyNames($.fn).filter(function (p)   {
      return ( typeof( $.fn[p] ) === 'function');
    });
  
    for (var i = 0; i &lt; functions.length; i++) {
      wrapper.oldTempjQueryFunction = $.fn[functions[i]];
      $.fn[functions[i]] = function () {
        var self = this;
        self.wrappedFunction = wrapper.oldTempjQueryFunction; 
        var returnVar = self.wrappedFunction.call(this);
        alert('jQuery was called'); 
        return returnVar;
      }
    } 
     
  }
  
  $().ready(self.__wrapjQuery);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="myDiv" style="background-color:#FF0000"&gt;
    ELEMENT
    &lt;/div&gt;
  
  &lt;button onclick="$('#myDiv').remove()"&gt;Remove Element&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However the code below, where I specify the function to override (<code>remove</code>) ,works (maybe because of the parameters):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function __wrapjQuery () {
   var wrapper = this;
   
   alert('Wrapping'); 
   wrapper.wrappedRemoveFunction = $.fn.remove;
      $.fn.remove = function () {
        var self = this;
        var returnVar = wrapper.wrappedRemoveFunction.call(this);
        alert('jQuery was called to remove'); 
        return returnVar;
      }
     
  }
  
  $().ready(self.__wrapjQuery);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="myDiv" style="background-color:#FF0000"&gt;
    ELEMENT
    &lt;/div&gt;
  
  &lt;button onclick="$('#myDiv').remove()"&gt;Remove Element&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How would I replace all functions (even those with parameters, like <code>each</code>) and keep jQuery working normally? Let's say I want to audit the most used methods from jQuery.</p>