IE 7 remove draggable item memory leak
I have a page with an unordered list <ul> with two list items <li>
I have set up each list item to be draggable using $('#id').draggable({ OPTIONS });
I removed the items from the unordered list using $('#ulID').empty();
The items are removed from the screen, but when I run the page in sIEve it shows the list items as being orphaned and each having 1 reference left to it. Also, any item that I have called jQuery on shows as a leak (ie if I create an accordion). Running the page in IEJSLeaksDetector show the list elements to be leaks with the reference reported coming from the code that does attachEvent('on' + type) where type is remove.
I have confirmed if I create a list element, do not make it draggable, and remove it, no leak is reported.
If I make the list elements draggable but do not remove them, no leak is reported.
If I wrap the attachEvent in an IF statement that skips the attachEvent if type is remove, no leak is reported.
Is there an issue in IE with removing an item that has been made draggable?
None of this behavior appears in firefox.
jQuery 1.4.2
jQuery UI 1.8
sample code
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="css/redmond/jquery-ui-1.8rc3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<meta charset=utf-8 />
<title>remove test</title>
<style>
body{ font: 80% "Trebuchet MS", sans-serif; margin: 50px;}
.drag ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.drag li { margin: 5px; padding: 5px; width: 200px; height: 20px; }
}
</style>
</head>
<body>
<ul id="drag" style="height:227px; width:222px" class="ui-widget-content">
<li id='i1' class="ui-state-default">Item 1</li>
</ul>
<input type="button" onclick="test()" />
<script>
function test()
{
$('#drag').empty();
}
$(function(){
$('#i1').draggable({
helper:'clone',
connectToSortable: '#sort',
revert: 'invalid',
cursor: 'move',
opacity: 0.4
});
$("ul, li").disableSelection();
});
</script>
</body>
</html>