Как вставить в динамически сгенерированный div скрипт для генерации div-ов новых
Здравствуйте!
Не только не пониманию ни чего в jquery, но и вообще в каком бы то ни было программировании не смыслю ни чего. Но. Вследствие изучения ряда постов, в том числе и из вашего форума, накропал небольшой код для сайта, который обрабатывает значение для поля input, генерируя заданное количество div-вов с определенным содержанием, в котором ID для форм определяются динамически. Далее. В дополнение к имеющемуся содержанию нужно добавить скрипт (внутрь вновь генерируемого html), который внутри сгенерированных блоков точно так же позволял бы, в зависимости от значения вновь сгенерированного внутри div-а поля input, генерировать новые блоки в нужном количестве. Иначе говоря, хочу в существующий код вставить код который точно также как существующий будет обрабатывать input с ID line-ob-is'+ [i+1] +' получаемый посредством обработки первого кода. ЗЫ: Подозреваю, что то, что я пытаюсь делать - тупо по синтаксису не верно. Подскажите - как прописывать? Все выглядит примерно так (не ругайте за корявую подачу, я вообще не местный):
<div class="price-field-tx">
<input type="number" id="line-ob" name="line-ob" value="0" min="0" max="100" />
</div>
<div class="price-text">
<label for="line-ob">Бла бла бла</label>
</div>
<div id="line-ob-container">
</div>
$("#line-ob").change(function(){
var kolloinput = $("#line-ob").val(),
kollo = $("#line-ob-container > .price-range").length;
if (kolloinput <= 100 && kolloinput > kollo) {
for (i = kollo; i < kolloinput; i++) {
var loDiv = document.createElement("div");
$(loDiv).addClass("price-range");
$(loDiv).html('<div class="price-field-tx"><input type="number" id="line-ob-is'+ [i+1] +'" name="line-ob-is'+ [i+1] +'" value="0" min="0" /></div><div class="price-text"><label for="line-ob-is'+ [i+1] +'">Бла бла бла выберите бла бла бла</label></div> !!!!СЮДА ХОЧУ ВСТАВИТЬ СКРИПТ ПРАКТИЧЕСКИ ТАКОЙ ЖЕ КАК ВНЕШНИЙ!!! ');
$("#line-ob-container").append(loDiv);
}
}
else {
if (kolloinput <= 100) {
for (i = kolloinput; i < kollo; i++) {
$("#line-ob-container > .price-range").last().detach()
}
}
}
});
|
Подскажите, как вообще вставлять скрипт в $(loDiv).html('..... '); ?
Не $(loDiv).html('<script>....</script>'); же. Следует ли как либо изменять текст вставляемого скрипта (экранировать какие-либо символы и тд.)? И как вставляемый скрипт заставить работать для динамического ID line-ob-is'+ [i+1] +'. Как правильно записать его? |
xax,
$(loDiv).append('<script>//...тут скрипт<\/script>');
В одну строку, или так - для многострочного скрипта
var i=0;//к примеру
var script = function(){/*==|==;
<script>
alert("Тест");
var n = #$1#;
<\/script>
==|==;*/};
script = script.toString().split('==|==;')[1].replace(/<\\\/script/gim,'</'+'script');//заменить #$1# на i+1: .replace('#$1#',i+1)
$(script).appendTo(loDiv);
|
xax,
скрипт не надо дублировать, достаточно написать его правильно почитав про делегировние в js и on в jQuery. |
рони,
++ xax, ;)
$("#line-ob").on("change", function() { //обработчик on ставит события и на элементы, появившиеся после его установки
var kolloinput = $("#line-ob").val(),
kollo = $("#line-ob-container > .price-range").length;
if (kolloinput <= 100 && kolloinput > kollo) {
for (i = kollo; i < kolloinput; i++) {
var loDiv = $("<div/>").addClass("price-range");
$(loDiv).html('<div class="price-field-tx"><input type="number" id="line-ob-is'+(i+1)+'" name="line-ob-is'+(i+1)+'" value="0" min="0"/></div><div class="price-text"><label for="line-ob-is'+(i+1)+'">Бла бла бла выберите бла бла бла</label></div>');
$("#line-ob-container").append(loDiv);
}
} else {
if (kolloinput <= 100) {
for (i = kolloinput; i < kollo; i++) {
$("#line-ob-container > .price-range").last().remove()
}
}
}
});
|
Сасибо, рони и Alex_63!
Мне даже кажется, еще немного - и я начну что-то понимать )). Не совсем понял, скрипт, заданный для инупта c ID line-ob, в этом случае будет работать и для создаваемых инпутов с динамическими ID? |
xax,
Тогда чуть иначе указывать селектор:
$("input[id^='line-ob']").on("change", function() { //обработчик on ставит события и на элементы, появившиеся после его установки
var kolloinput = $("#line-ob").val(),
kollo = $("#line-ob-container > .price-range").length;
if (kolloinput <= 100 && kolloinput > kollo) {
for (i = kollo; i < kolloinput; i++) {
var loDiv = $("<div/>").addClass("price-range");
$(loDiv).html('<div class="price-field-tx"><input type="number" id="line-ob-is'+(i+1)+'" name="line-ob-is'+(i+1)+'" value="0" min="0"/></div><div class="price-text"><label for="line-ob-is'+(i+1)+'">Бла бла бла выберите бла бла бла</label></div>');
$("#line-ob-container").append(loDiv);
}
} else {
if (kolloinput <= 100) {
for (i = kolloinput; i < kollo; i++) {
$("#line-ob-container > .price-range").last().remove()
}
}
}
});
|
| Часовой пояс GMT +3, время: 06:41. |