Дорогие друзья,
Помогите решить "задачу". Есть форма, ее код выкладывать не будут, она "обычная", состоит из 7 полей. Есть обработчик, он ниже. Обработчик добавляет динамический раздел. Был один турист, нажали кнопку, появился второй турист. Нажали кнопку еще раз появился еще турист и т.д. В чем проблема опишу ниже.
| PHP |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| //Добавление туристов в форме myform-2 (групповые экскурсии).
jQuery(document).ready(function(){
jQuery("#form_status_added").click(function () {
jQuery("<fieldset><legend class='legend123'>Второй турист</legend><div class='wrapper_forms'><div class='table_forms'><div class='row_forms'><div class='col_forms c25_forms'>Фамилия: <strong><span style='color: #ff0000;'>*</span></strong><input class='input126' name='prezime_osnivac2' type='text' placeholder='Ivanov' /></div><div class='col_forms c25_forms'>Имя: <strong><span style='color: #ff0000;'>*</span></strong><input class='input126' name='ime_osnivac2' type='text' placeholder='Ivan' /></div></div></div></div>" ).insertBefore("#form_status_added");
jQuery("<div class='wrapper_forms'><div class='table_forms'><div class='row_forms'><div class='col_forms c25_forms'>Ваше гражданство: <strong><span style='color: #ff0000;'>*</span></strong>:<select class='select2' name='derjavlanstvo_osnivac2'><option disabled='disabled' selected='selected'></option><option value='Rusije'>Россия</option><option value='Ukrajine'>Украина</option><option value='Bjelarusije'>Белоруссия</option><option value='Kazakhstana'>Казахстан</option><option value='Hrvatske'>Хорватия</option><option value='Crne Gore'>Черногория</option><option value='Srbije'>Сербия</option><option value='Bosne i Hercegovine'>Босния и Герцеговина</option><option value='Azerbejzana'>Азербайджан</option><option value='Albanije'>Албания</option><option value='Andore'>Андора</option><option value='Argentine'>Аргентина</option><option value='Australije'>Австралия</option><option value='Austrije'>Австрия</option><option value='Bangladesa'>Бангладеш</option><option value='Belgije'>Бельгия</option><option value='Brazila'>Бразилия</option><option value='Bugarske'>Болгария</option><option value='Gruzije'>Грузия</option><option value='Grcke'>Греция</option><option value='Danske'>Дания</option><option value='Egipta'>Египет</option><option value='Estonije'>Эстония</option><option value='Izraela'>Израиль</option><option value='Indije'>Индия</option><option value='Iraka'>Ирак</option><option value='Irana'>Иран</option><option value='Italije'>Италия</option><option value='Kanade'>Канада</option><option value='Kine'>Китай</option><option value='Kirgizije'>Киргизия</option><option value='Makedonije'>Македония</option><option value='Moldavije'>Молдавия</option><option value='Nemacke'>Германия</option><option value='Norveske'>Норвегия</option><option value='Ruminije'>Румыния</option><option value='Sirije'>Сирия</option><option value='Slovacke'>Словакия</option><option value='Slovenije'>Словения</option><option value='Turkmenije'>Туркмения</option><option value='Turske'>Турция</option><option value='Uzbekistana'>Узбекистан</option><option value='Ujedinjenog Kraljevstva'>Великобритания</option><option value='Finske'>Финляндия</option><option value='Francuzke'>Франция</option></select></div><div class='col_forms c25_forms'>Номер заграничного паспорта: <strong><span style='color: #ff0000;'>*</span></strong><input class='input126' name='broj_pasosa_osnivac2' type='text' placeholder='58 0311760' /></div></div></div></div>" ).insertBefore("#form_status_added");
jQuery("<div class='wrapper_forms'><div class='table_forms'><div class='row_forms'><div class='col_forms c25_forms'>Кто выдал заграничный паспорт: <strong><span style='color: #ff0000;'>*</span></strong><input class='input126' name='fms_pasos_osnivac2' type='text' placeholder='FMS 3001' /></div><div class='col_forms c25_forms'>Номер телефона:<strong><span style='color: #ff0000;'>*</span></strong><input class='input126' name='dolja_firma2' type='text' placeholder='069287855' /></div></div></div></div>" ).insertBefore("#form_status_added");
jQuery("<div class='wrapper_forms'><div class='table_forms'><div class='row_forms'><div class='col_forms c25_forms'>Емаил: <strong><span style='color: #ff0000;'>*</span></strong><input class='input125' name='dolja_evro2' type='text' placeholder='inter@gmail.com' /></div></div></div></div></fieldset>" ).insertBefore("#form_status_added");
//Удаляем родительский элемент (удаляет DIV, который обвалакивает кнопку "Добавить туриста")
jQuery("input.2osnivaca").unwrap();
//Замена элемента (Заменяем кнопку "Добавить туриста" + окружаем ее DIV, взамен удаленного)
jQuery("input.2osnivaca").replaceWith("<div class='div2osnivaca'><input class='2osnivaca' type='button' value='Добавить третьего туриста' id='form_status_added'></div>"); |
|
Проблема заключается в следующем:
При нажатии кнопки - появляется второй турист. Больше кнопка не нажимается, т.е. можно к 1 туристу добавить еще одного и все. Больше нельзя. Опытным путем было установленно, что проблема вот в этой строчке (в ней мы заменяем кнопку при клике по которой и происходит динамическое добавление содержимого):
| PHP |
1
2
| //Замена элемента
jQuery("input.2osnivaca").replaceWith("<div class='div2osnivaca'><input class='2osnivaca' type='button' value='Добавить третьего туриста' id='form_status_added'></div>"); |
|
Если ее закомментировать, то можно добавлять туристов сколько угодно, хоть 200 штук. Я так понял, это из за того, что мы ждем загрузку документа (jQuery(document).ready(function(){ ). Дождались загрузку, и, далее документ не понимает, что мы заменили кнопку при клике по которой должны добавляться новые туристы. А мне ее заменить надо, так как без этого возникают другие проблемы, которые я тоже не знаю как решить.
Как можно поправить код?
(
