2

I’m using jquery accordion in a web application. And I want to use this accordion in multiple places. So, I thought of cloning it. But the cloned accordion is only giving me the image of original clone and it’s not functioning like that of original one. The original accordion comprises of selectable items. After selecting one item some operation are carried out. I have written java script code for this operation. I just now want this to happen with other cloned accordion and selectable items too. so, How can I make cloned accordion function like the original accordion?

poonam
  • 43
  • 1
  • 9
  • 1
    I'm not sure why you would need to do that, but did you try cloning with the data and events parameters set to true? $('your-selector).clone(true, true) – TimHayes Oct 19 '12 at 03:19
  • Actually, i have to use the same accordion in 5 different dialog boxes and also it should be visible in home page. there are 10 section in the accordion plus each section has 10 different selectable items. So, i cannot write the same code for 6 times. So, i thought of cloning the accordion with its functionality. Now, suggest me how do i achieve this??? – poonam Oct 19 '12 at 05:18
  • 1
    Just like I wrote above. If you using jQuery .clone() to clone your accordion, then make sure to pass the two arguments .clone(true, true). You can read more in the docs http://api.jquery.com/clone/. But if you were doing it differently, than I misunderstood. Posting some code would be helpful. – TimHayes Oct 19 '12 at 12:13
  • Thank you so much, Sir. It worked. $('your-selector).clone(true, true) worked. Thanks a lot! – poonam Oct 19 '12 at 14:08
  • Great. I posted it as an answer so it can be closed. – TimHayes Oct 19 '12 at 14:33

1 Answers1

3

Use the deep cloning arguments of jQuery clone() to clone with all data and events:

.clone( [withDataAndEvents] [, deepWithDataAndEvents] )

[withDataAndEvents]: A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is false.

[deepWithDataAndEvents]: A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

So do $('your-selector').clone(true, true)

More here: http://api.jquery.com/clone/

TimHayes
  • 3,684
  • 21
  • 26