title: Why are the AJAX beforeSend and complete functions triggered multiple times when no options are set
body: <p>I'm using a <a href="http://api.jquery.com/jquery.ajax/" rel="nofollow">jQuery Ajax request</a> in a prototype function. I want the user to be able to pass his own <code>complete</code> and <code>beforeSend</code> functions into this function. These user-functions then should get extracted from the options and put into my own <code>beforeSend</code> and <code>complete</code> functions so I can do some system stuff in them before the user functions are triggered.</p>
  
  <p>I made this fiddle to clarify. See how the link "With Options" is working as expected and the link "Without Options" is not. Click it several times to see what I mean:</p>
  
  <p><a href="http://jsfiddle.net/xwmoaepc/1/" rel="nofollow">http://jsfiddle.net/xwmoaepc/1/</a></p>
  
  <pre><code>function jBox() {
      this.options = {
          ajax: {
              url: 'http://stephanwagner.me/ajax/0/SYSTEM RESPONSE',
              data: ''
          }
      }
  }
  
  jBox.prototype.ajax = function (options) {
  
      $('#log').append('&lt;div class="first"&gt;function prototype.ajax started&lt;div&gt;');
  
      // Abort running ajax call
      this.ajaxRequest &amp;&amp; this.ajaxRequest.abort();
  
      // Merge options
      var ajaxOptions = jQuery.extend(this.options.ajax, (options || {}));
  
      // Extract events
      var beforeSend = ajaxOptions.beforeSend || function () {};
      var complete = ajaxOptions.complete || function () {};
  
      // Set new beforeSend event
      ajaxOptions.beforeSend = function () {
  
          $('#log').append('&lt;div style="color: #d66"&gt;SYSTEM-beforeSend&lt;div&gt;');
  
          (beforeSend.bind(this))();
      }.bind(this);
  
      // Set new complete event 
      ajaxOptions.complete = function (response) {
  
          $('#log').append('&lt;div style="color: #6d6"&gt;SYSTEM-complete: ' + response.responseText + '&lt;div&gt;');
  
          (complete.bind(this))(response);
      }.bind(this);
  
      // Send new ajax request
      this.ajaxRequest = jQuery.ajax(ajaxOptions);
  };
  
  // Create instance
  var jBox = new jBox();
  
  // This function is working!
  function triggerAjaxOpt() {
  
      var userOptions = {
          url: 'http://stephanwagner.me/ajax/0/USER RESPONSE: ' + $('input').val(),
          beforeSend: function () {
              $('#log').append('&lt;div style="color: #66d"&gt;USER-beforeSend&lt;div&gt;');
          },
          complete: function () {
              $('#log').append('&lt;div style="color: #66d"&gt;USER-complete&lt;div&gt;');
          }
      };
  
      jBox.ajax(userOptions);
  }
  
  // This function will have more and more beforeSend and complete outputs
  function triggerAjax() {
      jBox.ajax();
  }
  </code></pre>
  
  <p>Also note, that when you change the number 2 to 3 after you clicked the not working link, it will not change the response.</p>
  
  <p>EDIT: It's working now, this is what i ended up with:
  <a href="http://jsfiddle.net/xwmoaepc/3/" rel="nofollow">http://jsfiddle.net/xwmoaepc/3/</a></p>