title: How do you attach callbacks to the deferred object that is attached to a deferred object?
body: <p>I have a chain of ajax requests that support a series of cascading drop down select lists. When you select a value in the 1st drop down, a request is fired to populate the 2nd, when that is complete (and the drop down filled), the next request fires to populate the 3rd drop down, and so on down the line.</p>
  <p>There are some variations to the way these request chains are formed, so I was hoping to assemble the requests using the jQuery Deferred objects.</p>
  <p>I see how I can chain the 2nd request to the first, but I don't see how I can chain the third request to the 2nd.</p>
  <pre><code>function Step1() { return $.ajax(&lt;foo&gt;);}
  function Step2() { return $.ajax(&lt;foo&gt;);}
  function Step3() { return $.ajax(&lt;foo&gt;);}
  
  $(function() {
     Step1().then(Step2).then(Step3);
  });
  </code></pre>
  <p>The intent is that Step3 is triggered when Step2 is resolved, but the deferred object returned by <code>.then(Step2)</code> is from Step1, so Step3 is added as a callback to Step1.</p>
  <p>I think it is clearer what I'm trying to do if you please see <a href="http://jsfiddle.net/TRAXh/" rel="nofollow noreferrer">this jsFiddle sample</a>.
  <strong>Edit</strong>:<a href="http://jsfiddle.net/TRAXh/1/" rel="nofollow noreferrer">Here</a> is the same script with a delay added to the second call to make it more obvious.</p>