Атрибуты fontawesome не обновляются с помощью jquery

См. обновление ниже ...

Исходный ответ:

Такое поведение происходит из-за комбинации использования ключевого слова this и способа обработки анимированных значков с потрясающим шрифтом. Как мы обсуждали в комментариях, он заменяет тег на один, однако, читая их документацию, я увидел, что он делает это с каждым изменением, это очень динамично.

Проблема в том, что когда вы передаете ключевое слово this в свой контекст ajax, вы блокируете этот экземпляр элемента управления svg, но после этого он заменяется. Поэтому, когда вы возвращаете this, вы видите, что класс в старом элементе управления успешно изменился, но новый элемент управления по-прежнему имеет счетчик.

Решением этой проблемы является использование «$ ('[data-fa-i2svg]')» вместо «$ ('this')» в вашей успешной функции обратного вызова. Это нацелено на текущий элемент управления.

Я нашел это решение здесь:

https://fontawesome.com/how-to-use/svg-with-js

В нем говорится: «Если вам абсолютно необходимо прикрепить события к значку, вы можете использовать атрибут data-fa-i2svg, но вам нужно разрешить динамическое создание элемента svg».

Обновление:

Использование селектора «$ ('[data-fa-i2svg]')» не работает, если у вас есть несколько значков на одной странице, поскольку он обновит их все.

Вы можете установить свойство font awesome, которое будет вкладывать svg в оригинал, а затем использовать селектор для получения дочернего элемента этого тега. Это работает, однако я думаю, что GrumpyCrouton - это адаптация простого использования $ ('# taskid -' + uidOfTask); вероятно, более элегантен в этой ситуации.

Поскольку это помечено как решение, я включаю его код ниже, но для получения дополнительных сведений см. Его ответ.

success: function(response) { 
    var element = $('#taskid-'+uidOfTask);
    element.attr('data-icon', 'check-square').removeClass("fa-pulse");
    if(response == 1) {
        element.attr('data-prefix', 'far');
    } else {
        element.attr('data-prefix', 'fas');
    }
} 

Ответ Райана Гиббса точен, но его решение не совсем то, что мне нужно.

Райан заявил, что:

Такое поведение происходит из-за комбинации использования ключевого слова this и способа обработки анимированных значков с потрясающим шрифтом.

а также:

Решением этого является использование «$ ('[data-fa-i2svg]')» вместо «$ ('this')» в вашей успешной функции обратного вызова. Это нацелено на текущий элемент управления.

Однако это изменило ВСЕ значки на странице. Мне это кажется очень странным поведением по умолчанию, но независимо от моего решения было просто назначить идентификатор каждому значку, связанному с этим событием onclick.

Я использовал свой уже уникальный uid из моей базы данных, чтобы назначить идентификатор с именем taskid-#, это должно работать независимо от того, сколько их находится на странице, потому что идентификатор всегда уникален.

Затем в моем успешном обратном вызове вместо использования $(this) я просто вызвал элемент напрямую по его идентификатору, который, похоже, сработал.

success: function(response) { 
    var element = $('#taskid-'+uidOfTask);
    element.attr('data-icon', 'check-square').removeClass("fa-pulse");
    if(response == 1) {
        element.attr('data-prefix', 'far');
    } else {
        element.attr('data-prefix', 'fas');
    }
}