jQuery Mobile select menu added dynamically

Question

I have a select menu and I'd like to add more select inputs dynamically. I found this solution: https://gist.github.com/snipe/1925906 and it works great without jQuery Mobile. But jQuery Mobile modifies elements and adds its own code. So before the select menu itself jQM adds such elements (and a few more but it isn't so important):

<span class='ui-btn-inner'><span class='ui-btn-text'><span>Option Name</span></span><span class='ui-icon ui-icon-arrow-d ui-icon-shadow'>&nbsp;</span></span>

This "Option Name" is already here and when I call the function, which uses "clone()" command, it clones this "Option Name" too. So, the first select menu works fine and its option name changes, but in the cloned menu it remains the same even when I choose another option.

Update: Here is my code (sorry for russian language in a few places). HTML with select and text inputs:

<fieldset class='ui-grid-a'>
<div id='inputphone1' class='clonedInputPhone'>
    <div class='ui-block-a' style='max-width: 200px;'>
    <select name='phone_type[]' data-mini='true'>
        <option value="mobile">Мобильный</option>
        <option value="home">Домашний</option>
        <option value="work">Рабочий</option>
    </select> 
    </div>
</div> <!-- inputphone1 -->
<div id='textinputphone1' class='textclonedInputPhone'>
    <div class='ui-block-b'>
    <input type='text' name='phone_number[]' data-mini='true' />
    </div>
</div> <!-- textinputphone1 -->
</fieldset> 

<fieldset class="ui-grid-a">
    <div class="ui-block-a" style="max-width: 200px;">
    </div>
    <div class="ui-block-b">
       <input id="btnAddPhone" type="button" data-icon="plus" data-iconpos="notext" data-inline="true" data-mini="true" onClick="addInput('phone_type', 'phone_number', 'clonedInputPhone', 'inputphone', 'btnAddPhone', 'btnDelPhone', '7', '0');" />
       <input id="btnDelPhone" type="button" data-icon="minus" data-iconpos="notext" data-inline="true" data-mini="true" disabled="disabled" onClick="removeInput('clonedInputPhone', 'inputphone', 'btnAddPhone', 'btnDelPhone');" />
    </div>
</fieldset> 

And js functions:

function addInput(selectName, textName, clonedInputName, inputName, btnAddName, btnDelName, limit, numstart){

// how many "duplicatable" input fields we currently have
var num = $('.' + clonedInputName).length;  

$('#' + btnDelName).removeAttr('disabled').button('enable');

// the numeric ID of the new input field being added
var newNum  = new Number(num + 1);

var newSelect = $('#' + inputName + num ).clone().attr('id', inputName + newNum);                                 
$('#text' + inputName + num).after(newSelect);  

var newText = document.createElement('div');
newText.id = 'text' + inputName + newNum;
newText.className = 'text' + clonedInputName;   
newText.innerHTML = "<div class='ui-block-b'><div class='ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c ui-mini'><input type='text' name='" + textName + "[]' data-mini='true' class='ui-input-text ui-body-c'></div></div>";
$(newSelect).after(newText);

if (newNum == limit - numstart)  {
    $('#' + btnAddName ).prop('disabled', 'disabled').button('disable');
} 
};

function removeInput(clonedInputName, inputName, btnAddName, btnDelName){

// how many "duplicatable" input fields we currently have           
var num = $('.' + clonedInputName).length;  

// remove the last element  
$('#' + inputName + num ).remove();  
$('#text' + inputName + num ).remove();     

// enable the "add" button, since we've removed one             
$('#' + btnAddName).removeAttr('disabled').button('enable');    

// if only one element remains, disable the "remove" button     
if ( num - 1 == 1)
$('#' + btnDelName ).prop('disabled', 'disabled').button('disable');
};

Because I cannot upload a screenshot, here it is: http://d.pr/i/choo The label "Мобильный" in the second select menu doesn't change, because it's written in the "span" which was cloned.

Any ideas how to solve this problem? Thank you!

Answer 1

I found a way to do it! (a horrible way, may be, but it works). If anyone can suggest more elegant way, I will be happy and grateful. But I'll post my solution, just in case.

This time I'm not using "clone()", I manually create all the elements that jQuery Mobile usually adds. And then I use function which dynamically changes "option name" in the span when I choose another option. This function can be found in the end of a looooong "newdiv.innerHTML" section.

Here is my new HTML/PHP code (I also optimized a number of arguments that I pass to the functions):

<div id='input_phone1' class='cloned_input_phone'>
<fieldset class='ui-grid-a'> 
    <div class='ui-block-a' style='max-width: 200px;'>
        <select name='phone_type[]' data-mini='true'>
        <?php
        $selectOptionsPhone = "<option value=\'mobile\'>Мобильный</option><option value=\'home\'>Домашний</option><option value=\'work\'>Рабочий</option>";  
        echo $selectOptionsPhone;
        ?>
        </select> 
    </div>
    <div class='ui-block-b'>
        <input type='text' name='phone_value[]' data-mini='true' />
    </div>
</fieldset> 
</div> <!-- input_phone1 -->

<fieldset class="ui-grid-a">
    <div class="ui-block-a" style="max-width: 200px;">
    </div>
    <div class="ui-block-b">
        <?php
        echo "<input id='btn_add_phone' type='button' data-icon='plus' data-iconpos='notext' data-inline='true' data-mini='true' onClick=\"addInput('phone', 'Мобильный', '".$selectOptionsPhone."', '".$phone_max."', '0');\" />";
        ?>
        <input id="btn_del_phone" type="button" data-icon="minus" data-iconpos="notext" data-inline="true" data-mini="true" disabled="disabled" onClick="removeInput('phone');" />
    </div>
</fieldset> 

And my JS functions:

function addInput(valueName, selectDefault, selectOptions, limit, startNum){

var inputName = "input_" + valueName;
var clonedInputName = "cloned_input_" + valueName;
var selectName = valueName + "_type[]";
var textName = valueName + "_value[]";
var btnAddName = "btn_add_" + valueName;
var btnDelName = "btn_del_" + valueName;

// how many "duplicatable" input fields we currently have
var num = $('.' + clonedInputName).length;  

$('#' + btnDelName).removeAttr('disabled').button('enable');

// the numeric ID of the new input field being added
var newNum  = new Number(num + 1);

var newdiv = document.createElement('div');
newdiv.id = inputName + newNum;
newdiv.className = clonedInputName; 
newdiv.innerHTML = "<fieldset class='ui-grid-a'><div class='ui-block-a' style='max-width: 200px;'><div class='ui-select'><div data-corners='true' data-shadow='true' data-iconshadow='true' data-wrapperels='span' data-icon='arrow-d' data-iconpos='right' data-theme='c' data-mini='true' class='ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-right ui-btn-up-c'><span class='ui-btn-inner'><span class='ui-btn-text'><span class='update" + valueName + num + "'>" + selectDefault + "</span></span><span class='ui-icon ui-icon-arrow-d ui-icon-shadow'>&nbsp;</span></span><select name='" + selectName + "' id='choose" + valueName + num + "' data-mini='true' data-role='none'>" + selectOptions + "</select></div></div></div><div class='ui-block-b'><div class='ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c ui-mini'><input type='text' name='" + textName + "' data-mini='true' class='ui-input-text ui-body-c'></div></div></fieldset><script type='text/javascript'>$('#choose" + valueName + num + "').change(function(event) {$('span.update" + valueName + num + "').html($(\"#choose" + valueName + num + " option:selected\").text());}); </script>";                                

$('#' + inputName + num).after(newdiv);     

if (newNum == limit - startNum)  {
    $('#' + btnAddName ).prop('disabled', 'disabled').button('disable');
    } 
};

function removeInput(valueName){

var inputName = "input_" + valueName;
var clonedInputName = "cloned_input_" + valueName;
var btnAddName = "btn_add_" + valueName;
var btnDelName = "btn_del_" + valueName;

// how many "duplicatable" input fields we currently have           
var num = $('.' + clonedInputName).length;  

// remove the last element  
$('#' + inputName + num ).remove();  
$('#text' + inputName + num ).remove();     

// enable the "add" button, since we've removed one             
$('#' + btnAddName).removeAttr('disabled').button('enable');    

// if only one element remains, disable the "remove" button

if ( num == 2)
$('#' + btnDelName ).prop('disabled', 'disabled').button('disable');
};

May be this will help someone next time.