Диапазон, установленный в javascript, преобразуется в SVG

Question

Я устанавливаю html элементов в моем JavaScript, чтобы поместить интервалы в сетку, для которой будут установлены наведения на разные значки. В одном столбце мне нужно 2 условно установить промежутки. Когда я прослеживаю через JavaScript, он имеет элемент HTML, который отображается как 2 пролета. Однако, когда я проверяю источник в Chrome инструментах разработчика, он конвертируется в SVG, но я хочу, чтобы он оставался в виде диапазона

JavaScript код:

if (className == 'servStatusLink,servExceptLink') {
            //_icon = '" class=ui-icon ui-icon-info class=far fa-exclamation-triangle mx-1"';
            html = ' <span data-id = "' + index + '" data-servid="' + obj.ServiceID + '" data-linenum="' + obj.LineItemControlNumber + '" data-claimnum="' + claimstatus.claimNumber + '" class="ui-icon ui-icon-info servStatusLink hoverLink"></span>';
            html += ' <span data-id = "' + index + '" data-servid="' + obj.ServiceID + '" data-linenum="' + obj.LineItemControlNumber + '" data-claimnum="' + claimstatus.claimNumber + '" class="far fa-exclamation-triangle mx-1 servExceptLink hoverLink"></span>';
        } else {
            html = ' <span data-id = "' + index + '" data-servid="' + obj.ServiceID + '" data-linenum="' + obj.LineItemControlNumber + '" data-claimnum="' + claimstatus.claimNumber + '" class="ui-icon ui-icon-info ' + className + ' hoverLink"></span>';
        }

результирующее значение переменной:

" <span data-id = "0" data-servid="6980" data-linenum="202000007086-1                                    " data-claimnum="202000007086" class="ui-icon ui-icon-info servStatusLink hoverLink"></span> <span data-id = "0" data-servid="6980" data-linenum="202000007086-1                                    " data-claimnum="202000007086" class="far fa-exclamation-triangle mx-1 servExceptLink hoverLink"></span>"  

Вы отлично увидите 2 пролета. Значки хорошо отображаются в сетке, но мой курсор не работает. 2-й диапазон превратился в SVG, как показано ниже

<span data-id="0" data-servid="6980" data-linenum="202000007086-1                                    " data-claimnum="202000007086" class="ui-icon ui-icon-info servStatusLink hoverLink" data-original-title="" title=""></span>
<svg data-id="0" data-servid="6980" data-linenum="202000007086-1                                    " data-claimnum="202000007086" class="svg-inline--fa fa-exclamation-triangle fa-w-18 mx-1 servExceptLink hoverLink" aria-hidden="true" data-prefix="far" data-icon="exclamation-triangle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z"></path></svg>

Итак, как я могу предотвратить преобразование диапазона, и мое зависание не работает?

Answer 1

Похоже, использование класса 'far fa-exclamation-triangle mx-1' дало мне проблемы. Изменился на приведенный ниже код, и теперь он работает нормально.

    buildServiceGridHoverSpan: function (index, obj, className, showInfoIcon) {
        if (!showInfoIcon)
            return '';

        let html = '';

        if (className == 'servStatusLink,servExceptLink') {
            html = ' <span data-id = "' + index + '" data-servid="' + obj.ServiceID + '" data-linenum="' + obj.LineItemControlNumber + '" data-claimnum="' + claimstatus.claimNumber + '" class="ui-icon ui-icon-info servStatusLink hoverLink"></span>';
            html += ' <span data-id = "' + index + '" data-servid="' + obj.ServiceID + '" data-linenum="' + obj.LineItemControlNumber + '" data-claimnum="' + claimstatus.claimNumber + '" class="ui-icon ui-icon-alert servExceptLink hoverLink"></span>';
        } else {
            html = ' <span data-id = "' + index + '" data-servid="' + obj.ServiceID + '" data-linenum="' + obj.LineItemControlNumber + '" data-claimnum="' + claimstatus.claimNumber + '" class="ui-icon ui-icon-info ' + className + ' hoverLink"></span>';
        }
        return html;
    },