Memory Leak in ui.droppables/draggables?
I have a problem with an application where I use draggables/dropples
and replace the draggables via AJAX.
Everytime after replacing or just removing the content, the Tool Drip
tells me that the event bindings of the dom nodes still exist.
I'm not able to remove the event-bindings. Neither with
droppable("destroy") nor with $("*").unbind().
Is there a memory leak or am I doing something wrong?
The Test-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ui.jquery.com/repository/
latest/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/repository/
latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/repository/
latest/ui/ui.droppable.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/repository/
latest/ui/ui.draggable.js"></script>
<script type="text/javascript">
$(function(){
$("#draggable").draggable();
$("#droppable").droppable({
accept: "#draggable",
drop: function(ev, ui) {
alert("dropped");
}
});
$("#removeIt").click(function(){
//$("*").unbind();
$("#draggable").draggable("destroy");
$("#droppable").droppable("destroy");
$("#draggable").remove();
});
});
</script>
<style type="text/css">
#droppable,
#draggable{
position:absolute;
top:100px;
left:400px;
width:200px;
height:200px;
background-color:#CCFFCC;
border:1px solid #f00;
}
#draggable{
z-index:1;
left:100px;
background-color:#FFCC66;
}
</style>
</head>
<body>
<a href="#" id="removeIt">Remove Draggable</a>
<div id="draggable">Draggable</div>
<div id="droppable">Droppable</div>
</body>
</html>