I have a php search page with can potentially display several hundred records. For each record, there is an icon which, when clicked, makes an ajax call. When the reply comes back, the text returned from the server script is added to a specific div and the source of the icon that the user clicked is changed (as a visual cue that that particular item was selected).

This works 100% perfect in FireFox (3.5.9), Chrome, and IE 7. However when I test it in IE 8 there is a HUGE lag between when the icon is clicked and when the div and icon are updated (usually between 10-15 seconds). By commenting out one line at a time, I've narrowed it down to the line that changes the src attribute of the icon...if I just comment that line out, the ajax call is made and the div is updated instantaneously.

The performance definitely seems to be tied to the number of DOM elements jQuery needs to dig through in order to find the correct icon to update. What I don't understand though is why it works fine in all other browsers and IE (both version 7 and version 8 when run in Compatibility Mode) but not IE 8 when in "normal" mode.

Thoughts? Thanks in advance!

Here's the jQuery code in question:

2. $.ajax(
3. {
4. type: "POST",
5. url: "processShoppingList.php",
6. data: "fn=add&id=" + id + "&name=" + name,
7. success: function(val) {
8. var theElement = $(val);
9. theElement.hide();
10. $("#shoppingList").append(theElement);
11. toggleDisplay();
12. theElement.fadeIn("slow");
13. 
    
14. var $btnAddToList = $("#btnAddToList_" + id);
15. var src = $btnAddToList.attr("src").match(/[^\.]+/) + "Checked.png";
16. 
    
17. /* THIS IS THE LINE THAT CAUSES THE PROBLEM
18.     IF I COMMENT IT OUT, THERE IS NO LATENCY ISSUE */
19. $btnAddToList.attr("src", src);
20. },
21. error: function() {
22. alert("Error!");
23. }
24. });