Click event handler slow in Google Chrome and other WebKit browsers

Using the jQuery UI to create an alternate selectable appearing as hierarchy with more 开发者_开发百科than three thousand elements.

Basically, using jQuery 1.6.1, the CSS from jQuery UI in addition to

<style type="text/css">
    .selectable,
    .selectable li
    {
        moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }
</style>
<script type="text/javascript">
    $(function () {
       $('.seletable li').click(function () { alert('hullo') });
    });
</script>

in the body

<ol class="seletable">
  <li style="margin-left: {calculated according to the current level in hierarchy}">...</li>
  ...
</ol>

The ordered list would of course have 3k + list elements.

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.

Are you giving the .click() event to more than 3000 elements in the same <ol>?

I hope that's not the case, since you could just give one click event to <ol> and stop, finding who generated the event each time. If you did like that, that could probably also be a cause of slowdown. Expecially in IE many event listeners are kill.

Something like

$( '<ol>' ).click( function(e) {

    // Here, e.target gives you the real element who was clicked

});