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

Question

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

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

вот так:

Тема 1: Название
Описание: это о названии
Теги: привет, скучно, название

Topic2: снова название
Описание: снова описание
Теги: IDK, помощь

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

Мой файл 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».

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

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

редактировать:

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

1

dynamic jquery php tagging tags

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

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

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

Кроме того, вы должны удалить data-role атрибут из 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 держать их.

0