title: How to execCommand from li?
body: <p>I'm losing focus on contentEditable when my menu li option is clicked so when I try to execCommand the selection no longer exists and does not affect the selection. How can I solve this without adding an input?</p>
  
  <p><strong>Updated:</strong>
  <a href="http://jsfiddle.net/SNTyY/10/" rel="nofollow">** <strong>jsFiddle</strong> **</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div contenteditable=true&gt;
      paragraph1&lt;br/&gt;
      paragraph2&lt;br/&gt;
      paragraph3
  &lt;/div&gt;
  &lt;div contenteditable=true&gt;
      paragraph4&lt;br/&gt;
      paragraph5&lt;br/&gt;
      paragraph6
  &lt;/div&gt;
  &lt;input type=button id=show value=ToggleMenu&gt;
  &lt;ul id=submenu&gt;
      &lt;li&gt;p&lt;/li&gt;
      &lt;li&gt;h1&lt;/li&gt;
      &lt;li&gt;h2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$("#show").on("click",function(){
      $("#submenu").toggle();
  });
  $("#submenu").on("click","li",function(){  //when this is clicked, editable div loses focus.
      document.execCommand("formatBlock", false, $(this).text());
      console.log($(this).text(), "was clicked");
  });
  </code></pre>