Живая строка JS jQuery

301

22 июня 2017, 06:49

Всем привет, очень нужна помощь. Создавая новый тестовый блок в меню методом .append, тем же методом создаю div на странице. Все с уникальными id как правильно написать конструкцию с методом .keyup, что бы вводя текст он отображался в соответствующем div.

            var add = 1;
            $('#add').click(function() {
                var b_r = "<button "+"id="+"itb_" + add +  ">"+"Remove"+"</button>";
                $('.items').append("<div " +"class=item"+">"
                                        +"Item #"+add
                                        +"<textarea "+"id="+"it_"+add+" type="+"text"+" value="+"1"+ ">"
                                        +"</textarea>"
                                        + b_r
                                    +"</div>");
                $('.page').append("<div id="+"val_it_" + add + ">"</div>");
                $('#it_'+add).keyup(function(){
                        var value = $(this).val();
                        $('#val_it_'+add).text(value);
                });

                add++;
            });

Answer 1

Схема следующая, для <textarea> добавь общий класс + добавь атриубут типа data-it где будет ссылка на id нужного элемента куда надо записать инфу, и на этот класс вешай отдельно обработчик, т.е. вынеси вообще из-за блока click

$('.example-class-name').keyup(function(){
    // пример, тут как твоей душе уже угодно
    var $this = $(this),
        value = $this.val(),
        id = $this.attr('data-it');
    $(id).text(value);
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не работает плагин copy-webpack-plugin при сборке

Решил на новом компьютер склонировать проект, который правильно собирался на старомМетодом проб и ошибок определил, что не срабатывает copy-webpack-plugin...

309

javascript