我正在开发一个网站，用户可以在服务器上创建他想要的多个域。每个域都可以属于一个组（这总体上对域本身没有任何作用，因此更容易排序）。
用户可以单独添加/删除/修改每个组。
我正在使用名为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
Spectrum init等：
$(".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());
}
});
我意识到这不是最容易上手的代码。可能会在将来使用角度或类似的东西进行重构。
答案 0 :(得分：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());
}
});