Как клонировать элемент с Jquery без потери функциональности виджета данных? - PullRequest
Новая
       34

Как клонировать элемент с Jquery без потери функциональности виджета данных?

0 голосов
/ 25 апреля 2020

У меня есть этот HTML скрытый элемент, используемый в качестве шаблона для клонирования через JQuery, как описано в моем следующем коде: 

        <div class="col-xs-3 col-xs-offset-1 templateChat" hidden>
        <div class="box box-primary direct-chat direct-chat-primary">
            <div class="box-header with-border">
                <h3 class="box-title">Chat</h3>
                <div class="box-tools pull-right">
                    <span data-toggle="tooltip" title="" class="badge bg-danger" >0</span>
                    <button type="button" class="btn btn-box-tool btn-collapse" data-widget="collapse">
                        <i class="fa fa-plus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool btn-remove" data-widget="remove">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="box-body collapse">
                <input id="UserConnection" hidden />
                <input id="UserTo" hidden />
                <div class="direct-chat-messages">
                </div>
                <div class="direct-chat-contacts">
                    <ul class="contacts-list"></ul>
                </div>
            </div>
            <div class="box-footer collapse">
            </div>
        </div>
    </div>

И я пытаюсь клонировать элемент с JQuery как в приведенном ниже коде: 

var $privateChatWindow = $('.templateChat').clone().removeAttr('hidden').removeClass('templateChat').addClass('privateChat');
$('.rowChat').append($privateChatWindow);

При удалении скрытого атрибута виджет данных сворачивается и удаляет функции, как ожидается, для элемента шаблона, однако после добавления клонированного элемента в .rowChat данные -widgets (свернуть / удалить) перестает функционировать,

Как заставить данные-виджеты работать на клонированном элементе,

Примечание: до сих пор пытались:

  1. Добавление атрибута data-widget на JQuery после клонирования элемента следующим образом: 
$privateChatWindow.find('.btn-collapse').data('collapse');
$privateChatWindow.find('.btn-remove').data('remove');
Вместо того, чтобы клонировать элемент, добавив его в виде текста к $('.rowChat'). Передав true в качестве параметра клонировать как .clone(true).

Но ничего из вышеперечисленного функции,

Пожалуйста, сообщите,

Заранее спасибо

...