I have a div, that holds a div.
like this:
<div id='reportHolder' class='column'>
<div id='
report'> </div>
</div>
Within the inner div, I add a bunch (7-12) of pairs of a and div elements, like this:
<h4><a>Heading1</a></h4>
<div> ...content here....</div>
The total size of the content, is maybe 200k. Each div just contains a fragment of HTML. Within it, there are numerous <span> elements, containing other html elements, and they nest, to maybe 5-8 levels deep. Nothing really extraordinary, I don't think.
After I add all the content,
I then create an accordion. like this:
$('#report').accordion({collapsible:true, active:false});
This all works fine.
The problem is, when I try to clear or remove the
report div, it takes a looooooong time, and I get 3 or 4 popups asking "Do you want to stop running this script?"
I have tried several ways:
option 1:
$('#report').accordion('destroy');
$('#report').remove();
$("#reportHolder").html("<div id='
report'> </div>");
option 2:
$('#report').accordion('destroy');
$('#report').html('');
$("#reportHolder").html("<div id='
report'> </div>");
option 3:
$('#report').accordion('destroy');
$("#reportHolder").html("<div id='
report'> </div>");
after getting a suggestion in the comment, I also tried:
option 4:
$('#report').accordion('destroy');
$('#report').empty();
$("#reportHolder").html("<div id='
report'> </div>");
No matter what, it hangs for a long while.
The call to accordion('destroy') seems to not be the source of the delay. It's the erasure of the html content within the
report div.
This is jQuery 1.3.2.
EDIT - fixed code typo.
ps: this happens on FF3.5 as well as IE8 .
Questions:
What is taking so long?
How can I remove content more quickly?
Addendum
I broke into the debugger in FF, during "option 4", and the stacktrace I see is:
data()
trigger()
triggerHandler()
add()
each()
each()
add()
empty()
each()
each()
(?)() // <<-- this is the call to empty()
ResetUi() // <<-- my code
onclick
I don't understand why add() is in the stack. I am removing content, not adding it. I'm afraid that in the context of the remove (all), jQuery does something naive. Like it grabs the html content, does the text replace to remove one html element, then calls .add() to put back what remains.
Is there a way to tell jQuery to NOT propagate events when removing HTML content from the dom?
