Issues with clone and clone(true)
Hello, first time poster on this group. Joined specifically because I have hit a wall with this problem and though I can work around it, I would still like to find a resolution.
I have a page where users can create new tabs. At the bottom I have a hidden div that I clone into each new tab the user creates. The relevant HTML and JS snippets:
<div id="sectiontemplate"> <!-- some form fields here --> </div>
// Listing A
// show() to overcome #sectiontemplate { display:none; }
$('#sectiontemplate').clone(true).appendTo('#section1').show();
// listing B
// add spinner to .spinner elements -- spinner provides up/down
// arrows on input boxes for numerical increment/decrement
$('#section1').find('.spinner').spinner({max: 100, min: 0});
Now I have two issues that I am facing.
1) When I enter some text in a form field in #section1 tab and create a new tab, the new tab (#section2) also contains that text. This would happen if cloning happened by reference--meaning updates in #section1 are also made to #sectiontemplate. This seems strange so I am confused why creating a new tab clones #section1 instead of #sectiontemplate:
// Listing C
// Inside the handler for creating a new tab (clones #sectiontemplate)
$('<div></div>').attr('id', c).appendTo('#setup').append($('#sectiontemplate').clone(true));
To over come this I am having change the .append() part to:
// Listing D
html($('#sectiontemplate').html()).find('.spinner').spinner();
I can't understand why clone() is copying the input field values from #section1 when I am clearly cloning #sectiontemplate
2) In Listing C, clone(true) does not copy event handlers (spinner() binds a few keyboard and mouse click events on some elements). So yet again, I am forced to copy the html() and re-intialize spinner().
Are these limitations/bugs or am I doing something wrong?
<br clear="all">-- AleemB
I have a page where users can create new tabs. At the bottom I have a hidden div that I clone into each new tab the user creates. The relevant HTML and JS snippets:
<div id="sectiontemplate"> <!-- some form fields here --> </div>
// Listing A
// show() to overcome #sectiontemplate { display:none; }
$('#sectiontemplate').clone(true).appendTo('#section1').show();
// listing B
// add spinner to .spinner elements -- spinner provides up/down
// arrows on input boxes for numerical increment/decrement
$('#section1').find('.spinner').spinner({max: 100, min: 0});
Now I have two issues that I am facing.
1) When I enter some text in a form field in #section1 tab and create a new tab, the new tab (#section2) also contains that text. This would happen if cloning happened by reference--meaning updates in #section1 are also made to #sectiontemplate. This seems strange so I am confused why creating a new tab clones #section1 instead of #sectiontemplate:
// Listing C
// Inside the handler for creating a new tab (clones #sectiontemplate)
$('<div></div>').attr('id', c).appendTo('#setup').append($('#sectiontemplate').clone(true));
To over come this I am having change the .append() part to:
// Listing D
html($('#sectiontemplate').html()).find('.spinner').spinner();
I can't understand why clone() is copying the input field values from #section1 when I am clearly cloning #sectiontemplate
2) In Listing C, clone(true) does not copy event handlers (spinner() binds a few keyboard and mouse click events on some elements). So yet again, I am forced to copy the html() and re-intialize spinner().
Are these limitations/bugs or am I doing something wrong?
<br clear="all">-- AleemB
Topic Participants
aleemb
Dave Methvin