title: Click event handler slow in Google Chrome and other WebKit browsers
body: <p>Using the jQuery UI to create an alternate selectable appearing as hierarchy with more than three thousand elements. </p>
  
  <p>Basically, using jQuery 1.6.1, the CSS from jQuery UI in addition to </p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .selectable,
      .selectable li
      {
          moz-user-select: none;
          -khtml-user-select: none;
          -webkit-user-select: none;
          user-select: none;
      }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
      $(function () {
         $('.seletable li').click(function () { alert('hullo') });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>in the body </p>
  
  <pre><code>&lt;ol class="seletable"&gt;
    &lt;li style="margin-left: {calculated according to the current level in hierarchy}"&gt;...&lt;/li&gt;
    ...
  &lt;/ol&gt;
  </code></pre>
  
  <p>The ordered list would of course have 3k + list elements.</p>
  
  <p>When loading the page and clicking and element the alert box appears to be significantly delayed, one or two seconds, in Google Chrome and other WebKit browser like Safari, but function as expected in other browsers like IE, Firefox, and Opera.</p>