ansaurus

Question

Answer 1

+1 A:

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();
    });
});

galambalazs 2010-07-04 22:21:13

Answer 2

+7 A:

$(':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.]

bobince 2010-07-04 22:22:39

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

jack 2010-07-05 22:04:24

even then it is very slow..i have tested in IE8, still this is sloe..but slightly better than IE6.. i assume i am triggering two actions, one direct submit and the other through jquery on a single button..please suggest how i can improve the speed...many thanks, jack.

jack 2010-07-05 22:05:02

Er, what? You're binding `submit` only on elements that *aren't* `<form>`, which is the only element that supports the `submit` event? What are you trying to do here?

bobince 2010-07-06 10:44:14

Answer 3

+2 A:

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();
});

SLaks 2010-07-04 22:23:38

Brilliant!!! thanks SLaks..it worked and very fast...

jack 2010-07-06 22:02:16

You're welcome! You should accept this answer by clicking the hollow check.

SLaks 2010-07-06 22:19:44

Hi SLaks, I am performing two actions on a single button. One through jsf action and other through jquery(above code) on that. the jsf action is getting triggered first...i want my jquery code to be trigger first.. how can i achive this? please suggest...basically jsf code is overriding some of the functionality i need in jquery call..if my jquery gets executed first...i can avoid the issue..

jack 2010-07-12 12:48:20

sorry..how can i avoid this issue...thanks in advance- jack.

jack 2010-07-12 13:29:33

@Jack: You need to run the jQuery code after the server replies. For more details, ask a separate question and show us your code.

SLaks 2010-07-12 13:46:05

Answer 4

A:

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.

Matthew Abbott 2010-07-04 22:31:31

ansaurus

tags:

views:

answers:

Jquery working very slow in IE6

related questions