Font Awesome 6将<i>标签转为<svg>后jQuery点击事件失效求助

Font Awesome 6的SVG自动替换机制会把页面中的<i>标签动态替换为<svg>标签，这可能导致依赖原标签的jQuery事件逻辑异常，以下是几种可行的解决方法：

方法1：改用attr()获取数据属性 #

jQuery的data()方法会缓存数据，动态替换后的<svg>元素可能未更新缓存，直接读取原始data-rating属性即可：

$(document).on('click', '.submit_star', function() {
    const rating_data = $(this).attr('data-rating');
    // 执行后续评分逻辑
});

方法2：配置Font Awesome保留原始标签结构 #

通过调整FA6的初始化配置，让原始<i>标签作为容器嵌套生成的<svg>，这样点击事件会正常冒泡到原标签，无需修改事件绑定代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
    FontAwesome.config = {
        autoReplaceSvg: 'nest',
        keepOriginalSource: true
    };
    FontAwesome.init();
});
</script>

方法3：确认SVG元素的类与属性继承 #

在浏览器开发者工具中检查替换后的<svg>元素，确认它是否继承了原<i>的submit_star类和data-rating属性。如果属性缺失，需确保自定义类和数据属性正确添加到<i>标签上，FA6默认会保留这些属性到生成的<svg>中。

内容的提问来源于stack exchange，提问作者Hammad Raza