时间戳

首页 > 解决方案 > 使用 jquery 或 javascript 将任何附加事件添加到 DOM 的事件侦听器

javascript - 使用 jquery 或 javascript 将任何附加事件添加到 DOM 的事件侦听器

问题描述

我现在正在为图标使用 fontawesome。我已经创建了自己的图标（在 svg 中），现在我尝试像 fontawesome 一样使用它。

一切正常，我的图标位于 svg 格式的 json 文件中，并且在页面加载时，js 会将 svg 中的所有图标加载到适当的标签中。但这只会在页面加载时发生一次。如果我在身体上有一些动态添加的元素怎么办？我需要一个任何附加事件的侦听器来将每个图标读取到 DOM。

我可以这样做吗？fontawesome 是如何做到的？

这是我现在的做法：

var icons = [];
$(document).ready(function () {
    getIcons();
});

function getIcons(){
    $.ajax({
        url:'/fileDown?param0=/icons.json',
        success: function (data){
            if(IsJsonString(data)){
                icons = JSON.parse(data);
                insertIcons();
            }
        }
    });
}


function insertIcons(){
    for (const icon of icons ) {
        if(icon.svg !== ""){
            $(`.hsh.${icon.iconClass}`).html(icon.svg);
        }
    }
}

我在想什么：

$("body").on("changed appendedTo", function () {
    insertIcons();
});

一个基本的 fontawesome 图标的示例 html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a26f6e4ee4.js" crossorigin="anonymous"></script> <!-- init font awesome here -->
    <title>Document</title>
</head>
<body>
    <i class="fa fa-user"></i> <!-- user is there -->

<script>
 $(document).ready(function () {
    // plane icon will be there even after 5sec.
    setTimeout(() => {
      $("body").append(" <i class='fa fa-plane'></i> ");
    }, 5000);
 });
</script>
</body>
</html>

标签： javascriptjquerydomdynamicicons

解决方案

推荐阅读