javascript - 将事件侦听器添加到由 Javascript 函数动态创建的元素

Question

嗨，我是 javascript 新手，刚开始做一些早期项目，我有一个“ui.js”和一个“app.js”文件，其中包含一些 html 和一个 json 服务器。ui.js 处理根据用户在浏览器中单击的内容动态显示不同的信息。单击导航栏中的连接时，app.js 从 json 服务器请求信息，ui.js 将数据显示在卡片列表中。每张卡片中都有一个编辑按钮，我需要知道何时单击编辑按钮，但无论我尝试什么，我都无法让它工作，谁能帮我指出正确的方向以知道如何打印编辑点击会有很大帮助？我刚刚失去了几个小时的生命，我想我已经失去了一些头发:-(

应用程序.js

    const ui = new UI;
    const http = new EasyHTTP;

const uiData = document.getElementById('data');
const editTanks = document.getElementById('params');
const editConnections = document.getElementById('connections');
const showTankView = document.getElementById('tanks');


// Function to load all event listeners

loadEventListeners();

//Load all events

function loadEventListeners(){

    editConnections.addEventListener('click', (e) => {
        http.get('http://localhost:3000/connections')
        .then(data => ui.showConnections(data))
        .catch(err => console.log(err));
        e.preventDefault()
    });

    editTanks.addEventListener('click',  (e) => {
        ui.showTankParams();
    });

    showTankView.addEventListener('click', (e) => {
        ui.showTanks();
    });

}

ui.js

class UI {
    constructor() {
        this.profile = document.getElementById('data')
    }



    showConnections(connections) {

        const params = document.getElementById('data')

        console.log(`Printing incoming data ${connections}`)
        const connectionOptionsHeader = `              
                <div class="container mt-3 mb-5">
                <h3>Connections</h3>
                <br>
                <br>

                <div class="row"></div>
                    <div class="div col-sm">
                        <button type="button" class="btn btn-success btn-lg btn-block mb-3" id="add-connection">ADD A NEW CONNECTION
                        <a href="#" class="">
                        <i class="add-item secondary-content fa fa-plus"></i>
                        </button>
                    </a>
                    </div>
                </div>
                <div class="container mt-3">

                        <ul class="connections list-group">`
                    let connectionOptions = ``                

                    connections.forEach((connection) => {
                      console.log(connection)
                      connectionOptions += `

                      <li class="list-group-item list-group-item-dark mb-3 mt-3" id="${connection.ipAddress}">

                      <div class="card text-white text-left bg-secondary mb-3 mt-3">
                          <div class="card-header">${connection.connectionName}
                                    <div class="card-body">
                                    <p class="card-title" id="connection-name">Connection Name: ${connection.connectionName}</p>
                                    <p class="card-text" id="connection-ipAddress">IP Address: ${connection.ipAddress}</p>
                                    <p class="card-text" id="connection-port">Port: ${connection.port}</p>
                                    <p class="card-text" id="connection-status">Network Status: ${connection.connectionStatus}
                                        <i class="fa fa-circle" style="color:rgb(0, 255, 21);"></i>
                                    </p>
                                    <a href="#" class="edit-connection-btn btn btn-warning text-left" >Edit Settings    
                                        <i class="edit-item fa fa-pencil text-right"></i>
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </li>`
                    })

                const connectionOptionsFooter = `   
                </ul>
                <br>
                <br>
                <br>

                <h7>Tip: A list of all current connections setup on TFM. Connection status is listed by the LED icon. Green indicates a the device is connected and communicating level data. 
                Amber indicates the device can be reached but there are issues with level data transmission. Red indicates there is no connection to the device. </h7>
                <br>
                <br>
                </div>`;
                params.innerHTML = connectionOptionsHeader + connectionOptions + connectionOptionsFooter;
    }

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <title>Task List</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col s12">
                <div id="main" class="card">
                    <div class="card-content">
                        <span class="card-title">Task List</span>
                        <div class="row">
                            <form id="task-form">
                            <div class="input-field col12">
                                <input type="text" name="task" id="task">
                                <label for="task">New Task</label>
                            </div>
                            <input type="submit" value="Add Task" class="btn">
                        </form>
                        </div>
                    </div>
                    <div class="card-action">
                        <h5 id="task-title">Tasks</h5>
                        <div class="input-field col s12">
                        <input type="text" name="filter" id="filter">
                        <label for="filter">Filter Tasks</label>
                    </div>
                    <ul class="collection"></ul>
                    <a href="#" class="clear-tasks btn black">Clear Tasks</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src = "app.js"></script>
</body>
</html>

标签： javascripthtmladdeventlistenerinnerhtml