具有动态输入的标记系统

Question

现在我正在尝试将引导程序 tagging-system 与动态输入字段代码结合起来。我想要每个动态生成的字段/div 一个tag-inputfield。

像这样：

主题 1：标题
描述：这是关于一个标题
标签：你好，无聊，标题

话题2：又是一个标题
说明：又是说明
标签: 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();
            });
        });

不工作的部分是这个：当我点击 "add" 按钮时： see here 它复制了这部分：

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

但是 tagging-system 在复制的字段中不起作用。它仅在 div "form-group fieldGroup".

之外工作

see here 每次我输入标签时，表单都想提交，但这不是我想要的。

请帮帮我...

编辑：

这里有一个 jsfiddle 可以更清楚地显示问题。 https://jsfiddle.net/t5vrLsur/#&togetherjs=pbAhjTR1t1 我知道这不是最漂亮的结构。别对我太苛刻。 :(

Answer 1

问题是插件本身负责 DOM 准备好的第一次初始化。在您的情况下，您希望在每次添加卡片后运行它。

您可以通过简单的运行新卡片上下文中的插件初始化来做到这一点。

此外，您必须从模板中的 input 中删除 data-role 属性，因为正如我们所说，此属性意味着自动初始化插件，但在模板的情况下我们会这样做我们将加载卡后手动它。

所以这里是相关的行：

// 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 来保留它们。

具有动态输入的标记系统

Tagging system with dynamic input

php

tags

jquery

tagging

dynamic