Duplicate event handlers, Loading divs with ajax, $('#div').load()
I'm loading a list of elements into mydiv with ajax, I want them to be selectable so I call the UI plugin selectable after the list has loaded.
The list building function produces this:
<div id='mydiv'>
<ul id='mylist'>
....
</ul>
</div>
<script>
$('#mylist').selectable();
</script>
My links are of the form:
<div onclick=\"$('mydiv').load('list_builder.php?.......')>Show List 1</div>
<div onclick=\"$('mydiv').load('list_builder.php?.......')>Show List 2</div>
<div onclick=\"$('mydiv').load('list_builder.php?.......')>Show List 3</div>
The problem is, every time I click the link to reload the list via ajax, I get a duplicate selectable event handler created. Should I be removing the old event handlers before reloading the div ? if so, how?
Everything works, as in selectable still works, and only seems to fire once but I get ever growing memory usage in firefox and an ever growing list of event handlers in the firebug script tab.
Eventually firefox starts to crawl and I have to restart the browser.
Thanks,
Jack.