通过 onclick 事件加载后，select2 标记框将不起作用答案

【问题标题】：select2 tag box does not work once loaded through onclick event通过 onclick 事件加载后，select2 标记框将不起作用
【发布时间】：2017-05-04 00:55:57
【问题描述】：

在我的页面中有一个使用select2 库的select 框。我想要做的就是在单击按钮后添加更多的选择框。为此，我尝试了以下代码：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/application.css"/>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.js"></script>
    </head>
    <body>  
        <div id="location_form">
            <div class="form-group" style="margin-bottom: 50px;">
                <label for="cat" class="col-sm-1 col-sm-offset-1">Category <span class="asterisk">*</span></label>
                <div class="col-sm-10">
                    <select class="form-control input-transparent select2" id="cat" name="category" required="required" multiple="multiple" size="1" data-parsley-trigger="change">
                        <option style="margin-bottom: 1px;">Select Categories</option>
                        <option value="1">Opt 1</option>
                        <option value="2">Opt 2</option>
                        <option value="3">Opt 3</option>
                        <option value="4">Opt 4</option>
                    </select>
                </div>
            </div>          
        </div>
        <input type="button" id="addmore" value="Add More" />
        <div class="locations"></div>

        <script src="js/action-scripts.js"></script>
        <script>
            //----- tag loader --//
            $(".select2").each(function(){
                $(this).children().first().remove();
                $(this).select2({
                    placeholder: "Select Categories",
                    maximumSelectionSize: 4
                });
            });
        </script>
    </body>
</html>

我的 action-script.js 如下所示：

// Add location 2
$('#addmore').click(function() {

    index = Math.random();
    var location_div = '<div class="location" id="location_' + index + '">';
    location_div += $('#location_form').html();
    location_div += '<hr class="col-sm-offset-1"></div>';
    $('.locations').append(location_div);
});

所以，基本上我想要做的是，一旦单击我的 HTML 页面中 ID 为 #addmore 的按钮，我会将 <div id="location_form"> div 中的所有内容附加到 <div class="locations">。

这可行，但是问题是我在新的选择框中失去了select2 库的所有功能。这是我的 jsfiddle 链接：

https://jsfiddle.net/0cars6oy/4/

如果您检查上面的 jsfiddle 链接，您将看到单击 Add More 按钮后出现的选择框不起作用。不管你在那里输入什么，它都不会从列表中提出任何建议。

我对 javascript 的了解非常有限。我很难弄清楚如何解决这个问题。非常感谢任何帮助。

干杯

【问题讨论】：

为什么我的问题被否决了？

标签： javascript jquery html select2

【解决方案1】：

你主要需要做两件事：

1) 从当前选择中删除 id，因为您是直接复制 html。 2）在按钮单击事件处理程序中调用它，添加html后

$(".select2").each(function(){
                $(this).children().first().remove();
                $(this).select2({
                    placeholder: "Select Categories",
                    maximumSelectionSize: 4
                });
            });

【讨论】：

非常感谢您的回答。我按照您在本地机器上的说明进行了尝试，但似乎没有用。我宁愿想出一些有线错误，例如Uncaught query function not defined for Select2 s2id_autogen1。您能否验证您提出的解决方案是否适用于 jsfiddle？
感谢这确实有效。我遇到了这个问题，因为我将我的班级命名为 select2。我在这里找到了解决方案：stackoverflow.com/questions/14483348/…
@KamrulKhan 这不是问题，我用这个类更新了你的小提琴并且它的工作......

【解决方案2】：

试试这个...我无法添加内联 jsfiddle，因为您的样式非常大 jsfiddle

var index  =  1;
$('#addmore').click(function() {
        var _html = $('#location_form').clone(false);
    _html.find(".select2").prev('.select2-container').remove();
    var _id = 'location_' + index;
    $('<div/>', {
        class: 'location',
      id: _id,
      html: _html.html() + '<hr class="col-sm-offset-1"></div>',
    }).appendTo('.locations').find('select.select2').select2({
        placeholder: "Select Categories",
        maximumSelectionSize: 4
    });
    index++;
});


    $(".select2").children().first().remove();
    $(".select2").select2({
        placeholder: "Select Categories",
        maximumSelectionSize: 4
    });

【讨论】：