title: jsFiddle testing jQuery AJAX request with echo
body: <p>The following code is alerting 'undefined' and not appending the html from the response data as I expected. Does anyone know why?</p>
  
  <p>JavaScript:</p>
  
  <pre><code>$(function() {
  
      $('.document').on('click', '.ajax', function(e) {
          e.preventDefault();
  
          // ajax request
          $.ajax({
              async: true,
              cache: false,
              type: 'post',
              url: '/echo/html/',
              data: {
                  html: '&lt;p&gt;This is echoed the response in HTML format&lt;/p&gt;',
                  delay: 1
              },
              dataType: 'html',
              beforeSend: function() {
                  console.log('Fired prior to the request');
              },
              success: function(data) {
                  console.log('Fired when the request is successfull');
                  $('.document').append(data);
              },
              complete: function() {
                  console.log('Fired when the request is complete');
              }
          });
  
      });
  
  });​
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="document"&gt;
      &lt;a class="ajax" href="#"&gt;Fire an AJAX request&lt;/a&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>Example jsFiddle: <a href="http://jsfiddle.net/L6bJ2/3/" rel="nofollow">http://jsfiddle.net/L6bJ2/3/</a></p>