From Michael Schwarz on the discuss list:
I have a very simple page which will be refreshed from time to time. I
build an example which will be called every 1000 msec to redner a html
table with a button inside. The button click event is set with the
bind method. This causes a memory problem.
<div id="display">
</div>
<script type="text/javascript">
function clickhandler() {
alert("clicked");
}
function render() {
var d = new Date();
var n = d.getTime();
$("button").unbind("click", clickhandler);
var sb = [];
sb.push("<table>");
for(var i=0; i<100; i++) {
sb.push("<tr><td>" + i + "</td><td>" + n + "</td><td><button>Click</
button></td></tr>");
}
sb.push("</table>");
$("#display").html(sb.join(''));
$("button").bind("click", clickhandler);
setTimeout(render, 1000);
}
$(window).ready(render);
</script>
I see the problem, now. The array jQuery.event.global is getting
bigger and bigger. For a long running Web application (without any
page refresh) it is a strange problem. If I have removed an event and
then will delete the element (the DOM element) this should be removed
from the jQuery.event.global array. If I press F5 it will clear nearly
everything and memory usage is like before.
I added some lines to the remove function (line 1245):
// original
if(!k) element["on" + type] = null;
// changed to
if (!k) {
element["on" + type] = null;
for ( var i=0; i<this.global[type].length; i++) {
if(this.global[type][i] == element) {
this.global[type].splice(i, 1);
break;
}
}
}
I see that the for loop isn't very well, maybe there is another way to
remove the element if there is no handler.