Как вставить в динамически сгенерированный 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, время: 08:30. |