jQuery Forum

Hi there,

I have been searching for a solution last few days but never found a solution that worked.
I have a few input-felds in a div-container, which I am cloning.
Some of the elements are ui elements e.g. input:select -> selectmenu().
Cloning works, however if you open the selectmenu of the new clone it opens at the original select.

I tried a few solutions that where suggested. don't use IDs use Class (which I did initally).
Use a .on to add ui function again

1. $(document).on("click"...

this worked for a other elements but not selectmenu.

if I inspect the cloned element there is something off, that I am not able to fix

cloned element. cloned from [1]. class="appellation_id" -> $( ".appellation_id" ).selectmenu();

1. <select id="appellation_id[2]" class="appellation_id" name="appellation_id[2]" style="display: none;">
2.                         <option value="">Choose</option>
                           <option value="1">Mr.</option>
                           <option value="2">Mrs.</option>
3. </select>
   

ui-part

1. <span tabindex="0" id="appellation_id[1]-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="appellation_id[1]-menu" aria-haspopup="true" class="ui-selectmenu-button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">Anrede</span></span>

you can see, that it is still referencing to [1].

my clone-script

1. $('.my_div_wrapper').each(function()
   
2. {
3.     var $wrapper = $('.my_div_fieldset', this);
4.     $(".add-field", $(this)).click(function(e) {
5.         $('.my_div_fields:last-child', $wrapper).clone(true, true).appendTo($wrapper).find(':input').each(function(){
6.             this.name = this.name.replace(/\[(\d+)\]/, function(str,p1){
7.                 return '[' + (parseInt(p1,10)+1) + ']';
8.             }),
9.             this.id = this.id.replace(/\[(\d+)\]/, function(str,p1){
10.                 return '[' + (parseInt(p1,10)+1) + ']';
11.             });
12.         }   
    
13.         ).val('').end();
14.     });
15.     $('.my_div_fields .remove-field', $wrapper).click(function() {
16.         if ($('.my_div_fields', $wrapper).length > 1)
17.             $(this).parent('.my_div_fields').remove();
18.     });
19. });

Please tell me what I am doing wrong!?

Cheers,

Christian