창에 새 데이터를 추가 할 때 jQuery 플러그인을 다시로드하는 방법. reload () 메서드가 제공되지 않았습니다.

저는 사용자가 서버에서 원하는만큼 많은 도메인을 만들 수있는 사이트에서 작업하고 있습니다. 각 도메인은 그룹에 속할 수 있습니다 (이는 전체적으로 도메인 자체에 아무런 영향을주지 않고 쉽게 정렬 할 수 있습니다).

사용자는 각 그룹을 개별적으로 추가 / 삭제 / 수정할 수 있습니다.

사용자가 각 그룹에 색상을 할당 할 수 있도록 Spectrum 이라는 jQuery 플러그인을 사용하고 있습니다. 를 참조하십시오 여기 .

그룹을 동적으로 업데이트하기 위해 일부 ajax를 수행하고 있습니다 (색상 / 이름 변경). 한 가지를 제외하고는 모든 것이 훌륭하게 작동합니다. 위에서 언급 한 플러그인은 추가 된 html (내가 예상 할 수있는)에 대해 제대로 작동하지 않습니다.

일반적으로 그런 경우 플러그인을 다시로드하지만 문서에 그렇게 할 수있는 방법이 없습니다.

다시로드 할 수있는 다른 방법이 있습니까? 어쩌면 jQuery 메서드일까요? 일부 이벤트에 바인딩 하시겠습니까? 어떤 것?

도움을 주시면 감사하겠습니다.

function ajaxAddDomainGroup(group_color_add, group_name_add) {

    $.ajax({
        url: "<?= URL::route('domains_ajax_add_group'); ?>",
        type: 'POST',
        data: 'data[group_name]=' + group_name_add  + '&data[group_color]=' + group_color_add,
        success: function (data)
        {
            if(data.status == 'OK') {
                $.notify('Group added successfully.', {
                    type: 'info',
                    delay: 120000
                });
                $('#js--groups_table tr:first').before(
                    '<tr>' +
                    '<td class="ccs-table__label" style="background-color: ' + data.data.group_color + '!important;"' + '>' + data.data.group_name + '</td>' +
                    '   <td class="ccs-table__action js--groups_edit">' +
                    '<a  href="#"><span class="icon-edit-ccs icon-ccs"></span></a>' +
                    '</td>' +
                    '<td class="ccs-table__action"><a id="delete_' + data.data.id + '" class="ccs-groups_delete" href="#"><span class="icon-delete-ccs icon-ccs"></span></a></td>' +
                    '</tr><tr><td colspan="3"><div class="js--edit_info css-hide_edit_info box__controls">' +
                    '<div class="col-md-6"> <input class="input--block js--input_group_name_edit" type="text" placeholder="New group name">' +
                    '</div><div class="col-md-6"><a class="btn btn--action btn--default js--group_edit btn__text" id="js--edit_' + data.data.id + '" href="#">Modify</a>' +
                    '<input class="js--spectrum-color-edit"/> <input type="hidden" class="js--group_color_edit" value="#000000"/> </div> </div> </td> ' +
                    '</tr>'
                );
            }
            else {
                $.notify('An error has occurred when trying to add the group.', {
                    type: 'info',
                    delay: 120000
                });
            }
        }
    });
}

function ajaxEditDomainGroup(group_name_edit, group_color_edit, group_id_edit) {

$.ajax({
    url: "<?= URL::route('domains_ajax_edit_group'); ?>",
    type: 'POST',
    data: 'data[new_group_name]=' + group_name_edit + '&data[new_group_color]=' + group_color_edit + '&data[group_id]=' + group_id_edit,
    success: function (data)
    {
        if(data.status == 'OK') {
            $.notify('Group edited successfully.', {
                type: 'info',
                delay: 120000
            });

            $('#js--edit_' + group_id_edit).closest('tr').prev('tr').find('td:first-child').replaceWith(
            '<td class="ccs-table__label" style="background-color: ' + group_color_edit + '!important;">' + group_name_edit + '</td>'
            );
        }
        else {
            $.notify('An error has occurred when trying to edit the group.', {
                type: 'info',
                delay: 120000
            });
        }
    }
});

}

$('body').on('click','.js--group_edit', function() {
    var group_name_edit = $(this).closest('td').find('.js--input_group_name_edit').val();
    var group_color_edit = $(this).closest('td').find('.js--group_color_edit').val();
    var group_id_edit = parseInt($(this).attr('id').replace(/[^\d]/g, ''), 10);

    if($.trim(group_color_edit) == '') {
        alert('The group color is required.');
        return false;
    }
    else if( $.trim(group_name_edit) == '') {
        alert('The group name is required.');
        return false;
    }

    ajaxEditDomainGroup(group_name_edit, group_color_edit, group_id_edit);
});

관련 HTML :

@foreach($domain_groups as $key => $domain_info)
    <tr>
        <td class="ccs-table__label"
                @if(isset($domain_info['color']) && $domain_info['color'] != ''))
                    style="background-color: {{ $domain_info['color'] }}!important;"
                @endif
                >{{ $domain_info['group_name']; }}
        </td>
        <td class="ccs-table__action js--groups_edit">
            <a href="#"><span class="icon-edit-ccs icon-ccs"></span></a>
        </td>
        <td class="ccs-table__action"><a id="delete_{{ $domain_info['id'] }}" class="ccs-groups_delete" href="#"><span class="icon-delete-ccs icon-ccs"></span></a></td>
    </tr>
    <tr>
        <td colspan="3">
            <div class="js--edit_info css-hide_edit_info box__controls">
                <div class="col-md-6">
                    <input class="input--block js--input_group_name_edit" type="text" placeholder="New group name">
                </div>
                <div class="col-md-6">
                    <a class="btn btn--action btn--default js--group_edit btn__text" id="js--edit_{{ $domain_info['id'] }}" href="#">Modify</a>
                    <input class="js--spectrum-color-edit"/>
                    <input type="hidden" class="js--group_color_edit" value="#000000"/>
                </div>
            </div>
        </td>
    </tr>
@endforeach

스펙트럼 초기화 등 :

$(".js--spectrum-color-edit").spectrum({
    color: '#000',
    showAlpha: true,showInput: true,
    // Set the hext value of the color to a hidden input
    move: function(color){
        $(this).closest('td').find('.js--group_color_edit').val(color.toHexString());
    }
});

나는 이것이 가장 눈에 띄는 코드가 아니라는 것을 알고 있습니다. 앵귤러 등을 사용하여 향후 리팩토링 될 가능성이 있습니다.