Подключение js к динамически созданным input
Здравствуйте...Прошу помощи в решении следующей проблемы:
Есть страничка с полями ввода город, улица, дом Сделана кнопка добвления полей, например адрес 2, 3, ....
<script>
$(function() {
$("#add").click(function () {
$("<div class='param'><div class='box'><input type='text' name='city' placeholder='Город'></div><div class='box'> <input type='text' name='street' placeholder='Улица'></div> <div class='box'><input type='text' name='building' placeholder='Дом'> </div><div class='box last-child'><input type='text' name='pod' placeholder='Подъезд'></div><div class='box'></div></div><div class='spacer'><br></div>" ).insertBefore("#form_status_added");
})
});
</script>
При создании страницы подключаются скрипты и css "Кладр в облаке" и jquery <link href="jquery.kladr.min.css" rel="stylesheet"> script src="js/lib/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="jquery.kladr.min.js" type="text/javascript"></script> <script src="js/form_with_map.js" type="text/javascript"></script> <link href="css/form_with_map.css" rel="stylesheet"> У элементов размещенных в коде до этого статически <div class="param" > <div class="box"> <input type="text" name="city" placeholder="Город"> </div> <div class="box"> <input type="text" name="street" placeholder="Улица"> </div> <div class="box"> <input type="text" name="building" placeholder="Дом" > </div> <div class="box last-child"> <input type="text" name="pod" placeholder="Подъезд" > </div> </div> все работает нормально, автозаполнение срабатывает. А вот у добавленных скриптом нет. Вопрос как подключить его к динамически созданным формам. На всякий случай ссылку привожу на ГитХаб (https://github.com/garakh/kladrapi-jsclient), там описание проекта и примеры есть, но как их использовать не знаю, недавно начал ...Заранее спасибо! |
.insertBefore("#form_status_added").find('input').trigger('событие');
|
Цитата:
|
Я думал в курсе.
Найдите в коде установку обработчиков запросов к КЛАДР на имеющиеся на странице поля ввода. Пусть это будет keyup, тогда ваш код должен быть такой:
$("<div class='param'><div class='box'><input type='text' name='city' placeholder='Город'></div><div class='box'> <input type='text' name='street' placeholder='Улица'></div> <div class='box'><input type='text' name='building' placeholder='Дом'> </div><div class='box last-child'><input type='text' name='pod' placeholder='Подъезд'></div><div class='box'></div></div><div class='spacer'><br></div>" ).insertBefore("#form_status_added").find('input').trigger('keyup');
Метод trigger запускает ранее установленный обработчик. Но я и элементы указал произвольно - find('input'), то есть все вставляемые поля, а это может быть не так, поэтому в качестве селектора здесь нужно не 'input', а только те, которые требуется. В курсе как это делать? |
Цитата:
|
Из первого вытекает второе: вставляю по клику на radio город в нужный адрес. То есть если 3 адреса:
<div class="korpus">
<input name="city_id" type="radio" id="vkl12" value="6600001500000"><label id="2" for="vkl12">Новоуральск</label>
<input name="city_id" type="radio" id="vkl22" value="6600002300000"><label id="2" for="vkl22"> Н. Тагил</label>
<input name="city_id" type="radio" id="vkl32" value="6600000100000"><label id="2" for="vkl32"> Екатеринбург</label>
</div>
<div class="box">
<input type="text" name="city2" id="c2" placeholder="Город">
<script>$('[name="city2"]').kladr({type: $.kladr.type.city});</script>
</div>
У каждого последующего в имени и id номер больше на 1... Код такой:
<script>$('label').click(function () {
var $city = $('[name="city'+this.id+'"]');
$city.kladr({
type: $.kladr.type.city
});
$('[name="city_id"]').change(function () {
var id = $(this).val();
// Устанавливаем значение поля ввода по id
$city.kladr('controller').setValueById(id);
});
})</script>;
Поведение такое: нажимаем на радио1 заполняется например екатеринбург в адресе 1, нажимаем радио 2 в 1 и 2 адресе заполняется например новоуральск, нажимаем на радио 3 - например тагил, все три адреса становятся тагил. заием по клику на любой радио меняются все три поля. Если после загрузки страницы начать не с первого адреса а со второго. то есть 2. затем 3, то одновременно меняются только 2 и 3 , а 1 остается пустым пока не нажмешь на радио 1. Прошу прощения если сумбурно объяснил. |
будет ли проблемой то, что поля создаются с оинаковыми name
Если поля добавляются в форму, которая затем будут отправлена на сервер, то да, проблемой будет прием данных - сервер получит значения не всех полей city, street и т.д., а только значения этих последних полей. Чтобы получить значения всех полей именовать их нужно как элементы вложенного массива: city[], street[] и т.д. В этом случае на сервере будут получены массивы city => [значение поля 1, значение поля 2, и т.д.]. Аналогично и других полей. ID, если они только нужны, должны быть различны. |
Цитата:
Ничего не понял. label id="2" - id должен быть уникален. И вообще не увлекайтесь ими, если они не нужны, не используйте их вообще, этот атрибут не обязателен у тега. |
Попробую объяснить... Представьте есть три поля ввода над каждым из них по 3 кнопки с названиями городов. Екатеринбург нижний Тагил и Новоуральск. 3 кнопки и поле ввода лежат в диве. При нажатии на одну из них, в соответствующем инпуте должно появиться название города (это я упрощаю...там не название). Так вот нажимаем на кнопку в первом блоке...выполняется код приведенный выше онклик. Значение заполняется в первом инпуте. Нажимаем на кнопку 2 блока. И вот тут заполняются выбранным значением второй и первый инпуты. Соответственно если затем нажать на кнопку 3 блока то выбранным значением заполнятся все 3 поля ввода. А мне бы чтобы они независимотработали. Вариант с .one. Не помог. Надеюсь на Вашу помощь. Заранее спасибо
|
Цитата:
|
| Часовой пояс GMT +3, время: 22:45. |