I'm using agile toolkit, a framework that generates javascript code from PHP. I have a div element (I'll call it "top-element") that contains some other div elements, some buttons. I want to move the "top-element" to another element, to change it's parent.
I tried something like:
$('#top-element').appendTo($('#new-parent'));
But the problem is that the "top-element" have some childrens that have click events, some buttons. After I append the "top-element" to a new element (after changing it's parent), the click events are triggered twice.
I tried to clone the element and append the cloned element to the new parent:
var cloned_top_element = $('#top-element').clone(true);
cloned_top_element.appendTo($('#new-parent'));
I got the same problem, the click event on "top-element" childrens was called twice.
The way to prevent double click is to use:
unbind('click') or off('click')
I tried something like:
$('#new-parent').find('.children-class').unbind('dblclick').unbind('click');
But still no results.
The binding for child buttons is like this:
$('.children-class').bind('click',function(ev){ ev.preventDefault();ev.stopPropagation(); other stuff });
The bind function appears only once. There aren't duplicates in the js code.
Any ideas? Anticipated thanks.
Remove the true in the clone function .clone(); this will not copy the event handlers