HandiworkNYC.com
HandiworkNYC.com

Reputation: 11114

jQuery delegate click function speed + crash issue in iPad

In iPad ios 5.1, https://s140452.gridserver.com/property/4123 (in landscape view)

Clicking the "show details" button takes about 15 seconds to execute on iPad. Sometimes it crashes mobile safari. It happens instantly in chrome or firefox.

Am I doing something wrong?

$j('#locations').delegate('.sidebar-expand', 'click', function(){
    var $me = $j(this),
        $locations = $j('#locations');

    if($locations.hasClass('expand')) {
        $locations.removeClass('expand');
    } else {
        $locations.addClass('expand');
    }
});

Upvotes: 1

Views: 623

Answers (1)

SeanCannon
SeanCannon

Reputation: 78006

First, use on instead of delegate as it has some minor performance gains introduced in 1.7+, but more importantly it's becoming the best practice. Same syntax:

$j('#locations').on('.sidebar-expand', 'click', function(){...

Secondly, iOS Safari JS is extremely slow. Laughably slow - hair pullingly slow. My iPad 1 safari JS benchmarked 38 times slower than Chrome on my PC. Any type of event delegation which forces jQuery to traverse and match selectors is going to significantly slow down your application on iOS mobile web.

That being said, I bet if you use PhoneGap and convert that into an actual app, it'll run fine because it won't be relying on the iOS safari JS engine.

In a nutshell, don't use future-proof event observers in iOS unless you have to. If you're not adding .sidebar-expand nodes after DOM ready, just use this instead:

$j('.sidebar-expand').on('click', function(){...

Upvotes: 2

Related Questions