С малейшей суммой настройки вашего кода.Из моего понимания вашего вопроса работает следующее:
Объяснение :
$('#roomtype').change(function () {}) стало $(document).on('change', '#roomtype', function() {})
В ответе используются делегированные обработчики событий вJQuery.Этот пункт из документации jQuery объясняет далее.
Обработчики событий связаны только с выбранными в данный момент элементами;они должны существовать в то время, когда ваш код вызывает .on ()
В вашем коде только первое поле выбора существует, когда страница инициализируется, и поэтому любые другие поля выбора добавляются позже (когда нажата кнопка «+ Новый клиент»), они не связаны существующим обработчиком изменений.
Реализация делегированного обработчика события в ответе связывает событие вместо document.Это может быть любой другой элемент DOM, если он существует на момент регистрации обработчика события.
Выбрав элемент, который гарантированно будет присутствовать во время присоединения делегированного обработчика события, выможет использовать делегированные события, чтобы избежать необходимости часто присоединять и удалять обработчики событий.Этот элемент может быть, например, контейнерным элементом представления в модели Model-View-Controller или документом, если обработчик событий хочет отслеживать все всплывающие события в документе.Элемент документа доступен в заголовке документа перед загрузкой любого другого HTML-кода, поэтому можно прикреплять туда события, не дожидаясь готовности документа.
Подробнее читайте здесь: http://api.jquery.com/on/
Во-вторых, другое изменение, необходимое для обеспечения работоспособности кода, заключается в том, как в вашем коде обнаруживается #container.Использование $('#container') searches from the root of the DOM and in this case will almost always find the first element. Changing $ ('# container') to $ (this) .siblings ('# container') finds the closest # container` в измененном поле выбора.
Fiddle: http://jsfiddle.net/5x1Lfedj/15/
$(document).ready(function() {
var genroomid = 2; // change 0 to the number you want to start with
$(".add-row").click(function() {
var $clone = $("ul.personal-details").first().clone();
var $input = $clone.find('#roomid');
$input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want
$clone.append("<button type='button' class='remove-row'>-</button>");
$clone.insertBefore(".add-row");
genroomid++; // increase id by 1
});
$(".form-style-9").on("click", ".remove-row", function() {
$(this).parent().remove();
genroomid--;
});
var blkofcod1 = "<select class='stretch' name='prefix[]'><option value='Mr'>Mr</option><option value='Ms'>Ms</option><option value='Child'>Child</option><option value='Infant'>Infant</option></select>";
var blkofcod2 = "<input name='fname[]' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30' required > <input name='lname[]' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30' required >";
var blkofcod3 = "<input name='nationality[]' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30' required >";
$(document).on('change', '#roomtype', function() {
var value = $(this).val();
var toAppend = '';
var $container = $(this).siblings('#container')
switch (value) {
case 'None':
toAppend = $container.html(toAppend);
return;
break;
case 'Single':
toAppend = blkofcod1 + blkofcod2 + blkofcod3;
$container.html(toAppend);
return;
break;
case 'Double':
toAppend = blkofcod1 + blkofcod2 + blkofcod3 + "<br>" + blkofcod1 + blkofcod2 + blkofcod3;
$container.html(toAppend);
return;
break;
default:
toAppend = $container.html(toAppend);
return;
}
});
});