Multiple concurrent event handling in jQuery
<p>I am attempting to handle multiple concurrent events using jQuery but I am having problems finely managing when the events are fired.</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;

    &lt;div id="edit" contenteditable="true"&gt;Edit some content&lt;/div&gt;
    &lt;button id="button" type="button"&gt;Click the button&lt;/button&gt;

    &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
        $('#button').click(function (e) {
          alert('I have been clicked.');
        });
        $('#edit').blur(function (e) {
          alert('I have been edited.')
        });
      });
    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>What I wish to achieve is for the content of the DIV to be edited by a user and when the button is clicked, for that event to be raised before the blur event on the DIV. It may be the case that the button is never clicked in which case the blur event may fire on its own. As you can see using the code above, once you edit the content and click the button only the blur event is fired.</p>

<p>Please can someone advise how I may achieve the desired functionality?</p>
