Icon-Picker 在 clone-function 之后出现多次

Question

首先：抱歉我的英语不好而且我真的不是 jquery-pro - 所以请放轻松。

这是最重要的代码片段 + 示例...如果您需要更多帮助，请告诉我。

HTML + 内联 jquery 图标选择器：

<div class="full" style="margin-bottom: 0;">

                                    <span class="two_fifth first" style="margin-bottom: 0;">
                                        <h3 class="skill-item-title">Symbol wählen</h3>
                                    </span>

                                    <span class="three_fifth" style="margin-bottom: 0;">

                                        <input id="icon2" type='' class="criteria_name_two show-tick" name='' style="width: 100%; float: left;" value='' placeholder="">

                                        <script type="text/javascript">
                                    jQuery(document).ready(function($) {
                                        var icons = {
                                            'Webapplikationen' : ['fa fa-car', 'fa fa-caret-square-o-down', 'fa fa-caret-square-o-left']
                                        };
                                        $('#icon2').fontIconPicker({
                                            source: icons,
                                            emptyIcon: true,
                                            hasSearch: true,
                                            allCategoryText: 'Alle Anzeigen',
                                        });
                                    });
                                    </script>
                                    </span>

                                </div>

HTML: "Add-Service" (调用下面的函数):

<div class="option_item">
                        <button type="button" name="submit_add_service" id='submit_add_service' value="add" class="button-secondary"><i class="fa fa-plus-circle"></i>Service hinzufügen</button>
                    </div>

jQuery（克隆）：

//ADD SERVICE
jQuery('#template_service').hide();
jQuery('#submit_add_service').on('click', function() {      
    $newItem = jQuery('#template_service .option_item').clone().appendTo('#resume_service').show();
    var tmp = $newItem;
    tmp = $.unique( tmp );
    if ($newItem.prev('.option_item').size() == 1) {
        var id = parseInt($newItem.prev('.option_item').attr('id')) + 1;
    } else {
        var id = 0; 
    }
    $newItem.attr('id', id);

    $newItem.find('.skill-item-title span.num').text(id+1);

    var nameText = 'wpjobus_company_services[' + id + '][0]';
    $newItem.find('.criteria_name').attr('id', 'fuck').attr('name', nameText);

    var nameText = 'wpjobus_company_services[' + id + '][1]';
    $newItem.find('.criteria_name_two').attr('id', 'fuck').attr('name', nameText);

    var nameText = 'wpjobus_company_services[' + id + '][2]';
    $newItem.find('.criteria_notes').attr('id', 'fuck').attr('name', nameText);

    var nameText = 'fuck';
    $newItem.find('.criteria_icon').attr('id', 'fuck');

    //event handler for newly created element
    $newItem.children('.button_del_service').on('click', function () {
        jQuery(this).parent('.option_item').remove();
    });

});

示例：http://kufifi.at/test/last/2.html

问题简而言之：在我调用 Clone() 函数后，选择器出现了两次。我的猜测是，它与尚未准备好的 DOM 或多个 ID 有关，但正如我所说，我真的不擅长 jquery 并且我真的已经结束了。

对于糟糕的代码感到抱歉 - 我 "played" 在最后一天试图解决这个问题时确实花了很多时间。

希望有人能帮助我。

谢谢，尼克松.

Answer 1

我自己搞定了，并从 Whosebug 上的其他帖子中得到了一点帮助。如果有人感兴趣：我通过在我的克隆函数中添加以下内容来解决它：

$newItem.find('.criteria_icon').fontIconPicker();

有时候事情比你想象的要简单...

Icon-Picker 在 clone-function 之后出现多次

Icon-Picker shows up multiple times after clone-function

jquery

dom

icons

clone

picker