jQuery change event not updating

Question

Using jQuery 1.9.1 and jQuery Mobile 1.3

I have some cloned form elements that consist of a select list and text input. I need the text input's name and id attribute to change and reflect the value of the item selected in the select list. This works initially, on the first set of select list/text input but not when you change the select list again. Nor does it work on cloned elements.

http://jsfiddle.net/mT4vw/

$(function(){
    $('form').on('change', '.mySelect', function(){
        var value = $(this).val();
        $(this).nextAll('.ui-input-search').find('#search').attr({name:value, id:value});
     });
});

Also tried this:

$(function(){
    $('.mySelect').on('change', function(){
        var value = $(this).val();
        $('.mySelect').each(function(){
            $(this).nextAll('.ui-input-search').find('#search').attr({name:value, id:value});
        });
    });
});

To sum up, I need to have this work every time the select list is toggled, only to the next text input. I need this to work on the initial select list/text input as well as cloned instances. Is there a better method than cloning (code is in the jsfiddle)? I like this method because it disables any previously selected options in the select list. Thank you.

Answer 1

Of course, it behaves as expected. You are changing the id on select change and then on the next change trying to retrieve with the old id which never exists anymore. Insetad you could use a className or use data-type=search in the selector.

Like this:

$(this).nextAll('.ui-input-search').find('[data-type=search]').attr({name:value, id:value});

Or: Change your markup to add a class say searchBox:

 <input type="search" name="" id="search" class="inline searchBox" value="" placeholder="Search" data-theme="d" data-inline="true">

and then select it with that class which is not a variable in your case unlike name/id

$(this).nextAll('.ui-input-search').find('.searchBox').attr({name:value, id:value});

Fiddle