title: contenteditable = true stops working when javascript is applied
body: <p>Hi i have a text box that was working fine when i implemented <code>contenteditable</code> it was working. But when i implemented jquery and <code>javascript</code> the <code>contenteditable</code> completely stopped working. I don't know if this is normal or not, any help would be greatly appreciated.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"&gt;
      &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
              $(".note").resizable();
              $(".note").draggable();
          });
      &lt;/script&gt;
      &lt;title&gt;Stickynote&lt;/title&gt;
      &lt;img src="images/logo.png"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="note" contenteditable="true"&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      background-image: url("images/background.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
  }
  
  html {
      height: 100%;
  }
  
  html img {
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  
  .note {
      width: 300px;
      height: 300px;
      background-image: url("images/stickynote.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 10px;
  }
  </code></pre>