title: .remove event triggers .blur event - how to escape that?
body: <p>I have the <code>.blur()</code> event bound to an element. Whenever I remove an element with <code>$(elem).remove()</code> method, the <code>.blur</code> event is triggered for the same element.
  Here is <a href="http://jsfiddle.net/Dhy6E/" rel="nofollow">jsFiddle</a> - to see the case click on the blue div and press any key.</p>
  
  <p>Here is the code:
  HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;&lt;/div&gt;
  &lt;ul id="tr"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
      width:100px;
      height:100px;
      background:blue;
      position:relative;
      cursor:pointer;
  </code></pre>
  
  <p>}
  JS:</p>
  
  <pre><code>$("#tr").on('keydown', '#ti', function() {
      $(this).remove();
  });
  $("#tr").on('blur', '#ti', function() {
      alert('blur is triggered');
  });
  $('#container').on('click', function() {
   var item = '&lt;li id="ti" contenteditable="true"&gt;&lt;/li&gt;';
   $("#tr").append(item);
   $("#ti").last().focus();
  });
  </code></pre>
  
  <p>How can I prevent the .blur event if an element is removed? Or maybe how can I know that the event is triggered my element's deletion?</p>