向jQuery标记输入插件添加图像

向jQuery标记输入插件添加图像,jquery,input,Jquery,Input,我正在处理一个收件人列表的输入字段,当添加收件人时,该字段将显示头像 我正在使用,以便用户可以输入多个收件人,以逗号分隔 当调用回调函数onAddTag时,它将用化身替换标记中的文本,然后是值。然而,当用户按下backspace或移除标签时,化身从所有接收者移除。你知道我应该如何改变我的onAddTag功能来保持头像的加载吗 以下是密码和代码: $(document).ready(function() { $('#recipients').tagsInput({ 'hei

我正在处理一个收件人列表的输入字段,当添加收件人时,该字段将显示头像

我正在使用,以便用户可以输入多个收件人,以逗号分隔

当调用回调函数onAddTag时,它将用化身替换标记中的文本,然后是值。然而,当用户按下backspace或移除标签时,化身从所有接收者移除。你知道我应该如何改变我的onAddTag功能来保持头像的加载吗

以下是密码和代码:

$(document).ready(function() {
    $('#recipients').tagsInput({
        'height': 'auto',
        'width': 'auto',
        'defaultText': 'Add a tag',
        'onAddTag': function(elem, elem_tags) {
            $('.tag', elem_tags).each(function() {
                var username = $(this).text();
                username = username.replace('x', '');
                username = username.replace(/\s/g, '');
                $(this).html('<img src="https://minotar.net/helm/' + username + '/16" alt="' + username + '"> ' + $(this).text());
            });
        },
        'minChars' : 3,
        'maxChars' : 16
    });
});

jQuery标记输入插件的当前版本在删除任何一个标记后重新呈现所有标记。您可以使用JS控制台或开发人员工具编辑其中一个标记,然后单击backspace删除另一个标记,您将看到原始标记被还原

为了解决这个问题,我认为插件允许的最佳选择是使用onChange回调来添加化身,而不是onAddTag。这样,每次重新呈现标签时,都会调用您的化身插入功能,无论是添加还是删除标签