title: How can I chain click events with Mootools so that they execute in order?
body: <p>I have a series of buttons that fire the list function when they are clicked. The list function itself contains an AJAX request and a bunch of other stuff before and after which loads in a separate section of the page.</p>
  
  <pre><code>var list = function() { }
  $$('.buttons').addEvent('click', list);
  </code></pre>
  
  <p>Everything works fine if I wait for list to complete before clicking on another button. However, if I click on two buttons quickly, the page will start to return incorrect responses. In fact, it appears as though the responses get out of sync by 1. So if I quickly click on button A then button B, it will load response A. Then if I click (much later) on button C, it will load response B.</p>
  
  <p>There are two ways I can see to solve this:</p>
  
  <p>1) Remove the click event from other buttons when any button is clicked and then restore it when list is complete. Unfortunately, I have tried placing <code>$$('.buttons').removeEvents()</code> at the top of the list function and then <code>$$('.buttons').addEvent('click', list);</code> at the bottom but this has no effect on the problem.</p>
  
  <p>2) Chain the click events so that list is only ever executed when the preceding list has finished.</p>
  
  <p>So can anybody tell me how to get the second solution working? Additionally, if anybody knows why the first solution doesn't work and why I get the weird delayed AJAX response behaviour, that would be great!</p>