jquery clone with jqueryui-elements

jquery clone with jqueryui-elements

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