CODEWITHSUNDEEP
jquery
jack
jack

Reputation: 65

Jquery working very slow in IE6

I am using the following jquery code in my application..

the idea is to click a button when the user comes of a form and clicks any button on the screen..

    <script> 
        $(document).ready(function() {
            $('form').focusin(function() {
                $(this).addClass('focused');
            });
            $(':not(form)').bind('click', function(e) {
                if (!$(e.target).parents('form.focused').length) {
                    form.getElementById("customerdetails").click();
                }
            });
        });
    </script>

this script works fine in forefox but this is extremely slow in IE6...may i know the reason for this?? does it work faster in IE8...any ideas??

please suggest to improve this in IE6

many thanks in advance, Jack.

Upvotes: 2

Views: 402

Answers (4)

gblazex
gblazex

Reputation: 50109

You may want to use delegate to attach one handler instead of attaching handlers to all non-form elements. This handler catches all click events, and decides what to do. This will speed things up on all browsers.

$(document).ready(function() {
    $('form').focusin(function() {
        $(this).addClass('focused');
    });
    $(document).delegate("form:not(.focused) *", "click", function(){
       $('#customerdetails').focus();
    });
});

Upvotes: 1

bobince
bobince

Reputation: 536349

$(':not(form)').bind()

Ouch! You just selected every element on the page except for forms, and added a click handler on each one separately. That's probably a whole load of elements (even things like <head> and <script> for which click makes no sense).

This will indeed be slow—everywhere: you only don't see it in the other browsers because their JS engines are faster than IE6 in general.

Use delegation on a parent element to catch all clicks from below it, checking the selector condition on each click rather than selecting all the elements and altering them:

$(document).delegate('*', 'click', function(e) {
    if (!$(e.target).is('form.focused *'))
        $('#customerdetails').focus();
});

[edit: moved selector test; whilst delegating on :not(form.focused *) does work in jQuery, it's slightly naughty in that it's not a standard CSS3 selector. CSS3 only allows a ‘simple selector’ in :not.]

Upvotes: 7

Matthew Abbott
Matthew Abbott

Reputation: 61589

IE6's javascript engine and DOM manipulation is notoriously slow at times. For modifying large numbers of elements at a time it can be very resource intensive. IE6 also has a tendency to block the updating of controls until some function calls have been completed (this is most apparent when updating select lists dynamically, you often have to defer execution using setTimeout). Very annoying really.

My advice to you when using JQuery selectors is that if you are not using id selectors e.g.:

$("#myElement");

...always try and prefix any selectors with the tag type, this will speed up selection quite a lot. When you use id selectors, jquery will use the browsers native getElementById function. When you supply a tag name, e.g:

$("div.myElement");

jquery will use the native getElementsByTagName function to get a quicker list. This is a lot quicker than traversing the entire DOM to try and find matching elements.

To go one stage further, try and give your selectors a context. A context is basically a starting point from which to start searching.

Upvotes: 0

SLaks
SLaks

Reputation: 887305

Writing $(':not(form)').bind('click', ...) will loop through every element in the document except the <form> tags and add a separate click handler to each one.
This can be extremely slow.

Instead, you should add a single click handler to the document and check whether the click originated inside a <form> tag, like this:

$(document).click(function(e) {
    var $target = $(e.target);
    if ($target.is('form.focused') || $target.closest('form.focused').length)
        return;

    form.getElementById("customerdetails").click();
});

Upvotes: 2

Related Questions