Система маркировки с динамическим вводом - PullRequest
Новая
       25

Система маркировки с динамическим вводом

0 голосов
/ 29 мая 2018

Сейчас я пытаюсь объединить систему тегов начальной загрузки с кодом динамического поля ввода.Я хочу для каждого динамически сгенерированного поля / div поле ввода тега.

вот так:

Тема1: Заголовок
Описание: речь идет о названии
Теги: привет, скучно, название

Тема2: снова название
Описание: это снова описание
Теги: idk, help

(...) и так далее.

Мой файл jquery для добавления дополнительных полей выглядит следующим образом: 

    $(document).ready(function () {
        var maxGroup = 10;       
          $(".addMore2").click(function() {
          $(".tagging").css("display", "none"); 
           if ($('feld2').find('.fieldGroup').length < maxGroup) {
              var fieldHTML = '<div class="form-group fieldGroup">' + 
              $(".fieldGroupCopy").html() + '</div>';
              $('feld2').find('.fieldGroup:last').after(fieldHTML);
                } else {
                    alert('Maximum ' + maxGroup + ' groups are allowed.');
                }
            });
            //remove fields group
                $("feld2").on("click", ".remove", function () {
                $(this).parents(".fieldGroup").remove();
            });
        });

Это не рабочая часть: Когда я нажимаю на кнопку «Добавить»: см. Здесь делает копию этой части: 

<div class="form-group fieldGroupCopy" style="display: none;">     
     <table>
        <tr> 
        <td class='first_td'><label for="titel"><b>Titel:</b></label></td>
       <td><input  type="text" name="description[]" class="form-control" placeholder="Title"/></td>
    <td><a href="javascript:void(0)" class="btn btn-danger remove">-</a></td>
    </tr>
    <tr>
        <td><b>Beschreibung:</b></td>
         <td><textarea type="text" name="description[]" class="form-control" placeholder="Beschreibung des Themas"/></textarea></td>
       </tr>
            <tr>
             <td><label for="Tags"><b>Tags</b></label></td>
                <td colspan='2'>
                    div class="form-group">
                            <input type="text" name='tags_WiBe[]' placeholder='Add Tags' data-role="tagsinput" class="form-control" />
                        </div>
                        </td>
                        </tr>
               </table>
              </div>

Но система тегов не работает в скопированных полях.Он работает только вне div "form-group fieldGroup".

см. Здесь Каждый раз, когда я вводю тег, форма хочет отправить, но это не то, что я хочу.

Пожалуйста, помогите мне ...

edit:

Вот jsfiddle, чтобы показать проблему более четко.https://jsfiddle.net/t5vrLsur/#&togetherjs=pbAhjTR1t1 Я знаю, что это не самая красивая структура.Не будь слишком строг ко мне.(

1 Ответ

0 голосов
/ 29 мая 2018

Дело в том, что сам плагин позаботится о первой инициализации на DOM ready.В вашем случае вы хотите запускать его после каждой добавляемой карты.

Вы можете сделать это, просто запустив инициализацию плагина в новом контексте карты.

Кроме того, вы должны удалить *Атрибут 1005 * из input в шаблоне, потому что, как мы уже говорили, этот атрибут предназначен для автоматической инициализации плагина, но в случае шаблона мы сделаем это вручную после загрузки карты.

Так что здесьсоответствующие строки: 

// wrap the html with jQuery so you could delete the inputtags wrapper later
var fieldHTML = $('<div class="form-group fieldGroup">' + $(".fieldGroupCopy").html() + '</div>');
$('feld2').find('.fieldGroup:last').after(fieldHTML);
// initialise again
fieldHTML.find('input').tagsinput();

Рабочая демонстрация

http://output.jsbin.com/dabijac/

Кроме того, в вашем коде есть несколько ссылок на jQuery, которые вызываютпроблема.Вы должны либо удалить его, либо использовать $.noConflict, чтобы сохранить их.

...