Search code examples
jqueryperformancelive

Jquery live gets Script causing web browser run slowly alert in IE

I have a block of code that generally works fine except when big lumps of data comes to the document then I get the error mentioned on the title.

I was attaching the click event to each element as you could see on the commented lines, but then I changed all to live as I though it was more effective. Despite the improvement on speed it would still come up with the alert twice asking me to stop the script, before rendering the entire page.

I wonder if there is any possible way of improve the performance on the following block of code (script) so the alert message does not come up when big amount of date its send to this particular page.

NOTE:I reduced the amount of code shown before as there were repeated code. this two left are giving a good example of the functions giving me a problem.

$(document).ready(function () {

//This adds the click event to toggle the next div right under the divLink clicked. 
//Old Code $(".divLink").click(function () { $(this).next('div').slideToggle(); });
$(".divLink").live('click', function (e) { $(this).next('div').slideToggle(); });


//Distribution 
//$(".Distribution").click(function () { $(this).parents().nextAll(".divDistribution").slideToggle(); });
$(".Distribution").live('click',function (e) { $(this).parents().nextAll(".divDistribution").slideToggle(); });

});

Any Ideas an explanation would be very much appreciated.

Thanks in advance.

Solution

  • Eureka!!!

    I found why I was getting such a big performance issues using .live on my code.

    I first was having the problem mentioned on my question because I was using document.ready+ element.click() to selected elements so it was causing big performance issues to the point of bringing the alert "Stop running this script?".

    Then I changed the element.click() for element.live('click',function(){}) because the .live attach a handler to the event for all elements which match the current selector therefore it should a lot quicker but it wasn't.

    The reason of the performance issues using .live was I left the statements using .live inside the document.ready(); and therefore it was waiting for the the page to be rendered to attach the handler to the even for all elements.

    The solution taking the .live out of the document.ready() as its not needed.

    The result The page rendering of the page is now lightening, no matter how big the document is.