将新数据附加到窗口时如何重新加载 jQuery 插件。没有提供 reload() 方法

Posted 2023-02-25

【中文标题】将新数据附加到窗口时如何重新加载 jQuery 插件。没有提供 reload() 方法

【英文标题】：How to reload a jQuery plugin when appending new data to window. No reload() method provided

【发布时间】：2015-08-28 14:29:29

【问题描述】：

我正在开发一个用户可以在服务器上创建任意多个域的站点。每个域都可以属于一个组（这总体上对域本身没有任何作用，它的存在是为了便于排序）。

用户可以单独添加/删除/修改每个组。

我正在使用一个名为Spectrum 的jQuery 插件，以便用户可以为他的每个组分配颜色。见here。

我正在做一些 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());
    
);

我意识到这不是最容易上手的代码。将来可能会使用 angular 或类似的东西对其进行重构。

【问题讨论】：

简单的情况是将其应用于匹配的加载元素。复杂的一个是修复插件以使用委托（有时可能）。请显示您的实际代码，以便提出切合实际的建议:)

好的，我要添加一些代码。

向我们展示您的代码...我相信您不需要重新加载插件，而是重新运行您的代码，可能如下所示：$("#target").spectrum(...)

@leo.fcx 很可能。在 js 方面，我并不完全是专家。

旁注：对委派事件使用document 而不是body。 body 有一个微妙的样式错误，可能导致鼠标事件无法点击它。

【参考方案1】：

您需要将频谱应用于动态加载的行中任何新创建的匹配元素：

var $newtr = $('<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>');
$('#js--groups_table tr:first').before($newtr)

$(".js--spectrum-color-edit", $newtr).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());
    
);

【讨论】：

好吧，我该死。就这么容易。不能感谢你。我一直在侧身挠头大约 40 分钟。