jQuery Live在IE中运行非常慢

Question

i have noticed that this line

    $('#opp-tabs input[type=text]:not(#newActionText), #opp-tabs textarea').live('keyup', function() {
        onFormChanged();
    });

runs extremly slow in IE8, it works fine in firefox and chrom but not in IE, it to be honest it is cos of word 'not', how can it define this different to run in normall speed in IE ?

Answer 1

You really should make sure that selectors are as lightweight as possible, especially if used in .live() methods. What happens there is, that the event actually gets bound to the document.body and it needs to check there whether or not a given event matches your original selector string. That process can be pretty expensive and in your case it also needs to invoke Sizzle ^** , which makes it even slower.

Best case solution, use .on() or .delegate() to limit the necesarry DOM bubbling. That means, you don't bind the event handler to the body , but to the closest shared parent node , which increases overall performance. Secondly, more important, improve that selector !

Use class names or whatnot to query for the nodes you require, actually it can't be much worse than the current state.

To optimize the current form, try it like so:

$('#opp-tabs input:text, #opp-tabs textarea').not('#newActionText').on('keyup', 'closest shared parent selector', function() {});

Reference: .delegate() , .on()

^{** Sizzle is jQuery's javascript css-selector engine}

Answer 2

Adding to @jAndy's answer, you could represent this as

$('#opp-tabs input[type=text], #opp-tabs textarea').live('keyup', function() {
    if(this.id != "newActionText") onFormChanged();
});