title: jquery ajax returns success when directly executed, but returns error when attached to button, even though server response is 200 OK
body: <p>This is somewhat related to other similar questions:</p>
  
  <p><a href="https://stackoverflow.com/questions/7542730/jquery-ajax-returns-error-but-is-success">jquery ajax returns error but is success</a></p>
  
  <p><a href="https://stackoverflow.com/questions/18862066/jquery-ajax-always-returns-error-data-being-added-to-database">jquery .ajax always returns error - data being added to database</a></p>
  
  <p><a href="https://stackoverflow.com/questions/19557019/jquery-ajax-call-always-returns-error">Jquery Ajax Call always returns error</a></p>
  
  <p>However, my problem doesn't seem to be the <code>data:"json"</code> issue.</p>
  
  <p>My code is a simple POST request to a server and, for testing purposes, it is always returning 200 OK.</p>
  
  <p>If I run the jquery code directly after document ready, it works just fine and calls the <code>success</code> function.</p>
  
  <p>But if I attach it to a <code>on("click")</code> button event, it always return the error function. Nothing has changed on the server and I can see on the console that the right resource is being called.</p>
  
  <p>My main code is located on a js file:</p>
  
  <pre><code>var myObj = function(){
      var url = "myURL";
      this.functionINeed = function(data, cb) {
          ajaxPost(url, data, cb);
      };
  
      function ajaxPost(url, data, cb){
          $.ajax({
              "url" : url,
              "contentType" : "application/json; charset=UTF-8",
              "data" : data,
              "type" : "POST",
              "success" : function(serverData, textStatus, jqXHR){
                  cb(null, {
                      "serverData" : serverData,
                      "textStatus" : textStatus,
                      "jqXHR" : jqXHR
                  });
              },
              "error": function (jqXHR, textStatus, errorThrown) {
                  cb({
                      "jqXHR" : jqXHR,
                      "textStatus" : textStatus,
                      "errorThrown" : errorThrown
                  });
              }
          });
      };
  }
  //I initialize the object directly on the js file
  MyObj = new myObj();
  </code></pre>
  
  <p>Then, the first scenario: call the function directly on page load:</p>
  
  <pre><code>var data = {
          "action" : "someaction",
          "code" : "somecode"
      }
      MyObj.functionINeed(JSON.stringify(data), function(err, response){
          if(err){
              alert(err.errorThrown);
              return err;
          }else{
              alert(response.textStatus);
              return response;
          }
      });
  </code></pre>
  
  <p>This works fine: the server is called, the content is returned and JQuery calls the <code>success</code> function.</p>
  
  <p>However, if I attach this code to a button event, it always returns the <code>error</code> function. I am monitoring the server and I am sure it is returning the correct data.</p>
  
  <pre><code>$("#myButton").on("click", function(){
      var data = {
          "action" : "someaction",
          "code" : "somecode"
      }
      MyObj.functionINeed(JSON.stringify(data), function(err, response){
          if(err){
              alert(err.errorThrown);
              return err;
          }else{
              alert(response.textStatus);
              return response;
          }
      });
  });
  </code></pre>
  
  <p>For the records, my server is Node.js with Sails.js, but this doesn't seem to matter.</p>
  
  <p>The many similar questions are somehow related to the <code>data:"json"</code> issue, but I've removed it and the most weird is that the behavior only happens when you attach the code to an event.</p>
  
  <p>I would suspect there is some kind of scoping issue involved (object being instantiated on the file, for ex.), but the server is being correctly called every time. I just can't understand why JQuery interprets all responses as errors (and empty server data).</p>
  
  <p>What am I doing wrong here?</p>