0

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.

Pascut
  • 3,291
  • 6
  • 36
  • 64
  • How are you binding the click event in the first place? – freedomn-m Nov 04 '16 at 09:34
  • can you replicate this error in a jsfiddle? – madalinivascu Nov 04 '16 at 09:41
  • No, because I have a framework and there's a lot of custom code. – Pascut Nov 04 '16 at 09:42
  • can you at least provide the html – madalinivascu Nov 04 '16 at 09:44
  • no, because it's a lot of code implied – Pascut Nov 04 '16 at 09:52
  • You say it "appears" once - do you also mean that it is only "called" once? – freedomn-m Nov 04 '16 at 09:53
  • yes, it's called only once. Regarding "bind" this is not deprecated, but "As of jQuery 3.0, .bind() has been deprecated.". We're not using jquery 3.0.. – Pascut Nov 04 '16 at 09:54
  • I didn't say deprecated, I said replaced. :) – freedomn-m Nov 04 '16 at 09:54
  • The framework generated bind by default. I personally use "on"..but "bind" should also work good – Pascut Nov 04 '16 at 09:56
  • You'll need to try to recreate the problem in new code. There's too much "other" code that could be causing the problem, such as the "framework" and your html structure. If you can't recreate this using a simple jsfiddle (couple of divs, and appendTo) then it *must* be something in that hidden code which we cannot see, therefore cannot help you with. This might help [mcve] – freedomn-m Nov 04 '16 at 09:57
  • Good point, but I created this question with the hope that maybe someone else had the same problem in the past. – Pascut Nov 04 '16 at 09:58
  • I also tried to replace the initial bind('click') event with unbind('click').bind('click') , but still no changes. This should do the stuff, but in my case is not working – Pascut Nov 04 '16 at 10:02
  • Here's a fiddle with all the information you've provided: https://jsfiddle.net/hefaa8ky/ I recommend updating the question title to include the framework (hidden in a comment) and maybe add a tag (if there is one) for that framework. It's possible it's a known issue with the framework, but, as the question stands, it's not reproducible. – freedomn-m Nov 04 '16 at 10:07
  • You're right. I guess this problem is framework-related. – Pascut Nov 04 '16 at 10:14
  • The ugly thing is that the element bind event appears only once in the page's js source code, so there shouldn't be two triggers. I'll check all his parents, maybe there's a bug. – Pascut Nov 04 '16 at 10:18
  • Have you tried using detach() and then appendTo() ? – Mandeep Jain Nov 04 '16 at 11:21
  • Yes, but it's working similar to clone. It still triggers two clicks. It's a page related js issue, it happens only on one page, it's not a general js issue. – Pascut Nov 04 '16 at 11:27
  • would have helped, but was only following [atk4] tag not [agiletoolkit]. Will follow both now. – romaninsh Nov 29 '16 at 11:30

1 Answers1

0

Remove the true in the clone function .clone(); this will not copy the event handlers

madalinivascu
  • 32,064
  • 4
  • 39
  • 55
  • I tried this also. Still two triggers for the click event. – Pascut Nov 04 '16 at 09:41
  • No, because I have a framework and there's a lot of custom code. The js regarding click events is generated by the framework. But is valid js code. – Pascut Nov 04 '16 at 09:43
  • it is called: agile toolkit – Pascut Nov 04 '16 at 09:51
  • This is why I've accepted your answer: It was a framework specific issue. In the end, the clone() followed by initial element hide and an append of the cloned element to the new parent solved the problem. Thanks. – Pascut Nov 07 '16 at 08:11