Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как вставить в динамически сгенерированный div скрипт для генерации div-ов новых (https://javascript.ru/forum/jquery/63173-kak-vstavit-v-dinamicheski-sgenerirovannyjj-div-skript-dlya-generacii-div-ov-novykh.html)

xax 22.05.2016 00:41

Как вставить в динамически сгенерированный 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()
           }
         }
    }
});

xax 22.05.2016 10:45

Подскажите, как вообще вставлять скрипт в $(loDiv).html('..... '); ?
Не $(loDiv).html('<script>....</script>'); же. Следует ли как либо изменять текст вставляемого скрипта (экранировать какие-либо символы и тд.)?

И как вставляемый скрипт заставить работать для динамического ID line-ob-is'+ [i+1] +'. Как правильно записать его?

Alex_63 22.05.2016 11:17

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);

рони 22.05.2016 11:42

xax,
скрипт не надо дублировать, достаточно написать его правильно почитав про делегировние в js и on в jQuery.

Alex_63 22.05.2016 11:51

рони,
++

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()
           }
       }
   }
});

xax 22.05.2016 12:11

Сасибо, рони и Alex_63!
Мне даже кажется, еще немного - и я начну что-то понимать )).
Не совсем понял, скрипт, заданный для инупта c ID line-ob, в этом случае будет работать и для создаваемых инпутов с динамическими ID?

Alex_63 22.05.2016 12:17

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.