jQuery click hander slow to run after many clicks
I'm trying to bind a click handler to several elements on the DOM. Once
clicked, the element loads some new content in a shadowbox. After playing
with the code for a little while, I noticed it took progressively longer
to load each time I clicked.
I tested this by disabling all the click handler's function except a
simple console.log. Even after this, by the 15th click, the response got
slower and slower. It didn't matter which post I clicked, or even if the
content had already been loaded-- it really starts to slow down around the
15th click on this '.shadowbox-link' element.
Here is my click handler:
$j('#content article .shadowbox-link').bind('click', showShadowboxPost);
Which goes to the function:
var showShadowboxPost = function() {
// Unbind click handler
$j(this).unbind('click', showShadowboxPost);
// Variables for ajax request
var postData = {
'postId': $j(this).attr('data-id'),
'postType': $j(this).attr('data-type'),
'elementId': $j(this).attr('id'),
'prevPost': $j(this).prev().attr('id'),
'nextPost': $j(this).next().attr('id')
};
preFadeIn();
// If content already loaded, avoid ajax request
// The following functions include the fadeIn
if($j(this).children('.single-post').length !== 0) {
preLoadedRequest(this)
} else {
ajaxRequest(postData, this)
}
// Rebind click handler
$j(this).bind('click', showShadowboxPost);
return false;
};
Full file here:
http://www.clarkthomasny.com/wp-content/themes/cleanslate/js/shadowbox-post.js
The HTML is basically like this:
<div id="content">
<div id="articles">
<article class="shadowbox-link"></article>
<article class="shadowbox-link"></article>
<article class="shadowbox-link"></article>
[etc..]
</div>
</div>
Here is the page its at: http://www.clarkthomasny.com/
I tried to debug this several different ways but I'm still not sure what's
going on and think it must have something to do with binding the click
handler to so many elements? I've been working with jQuery a few years now
and I'm stumped, please help. Thanks!
No comments:
Post a Comment