javascript中的动态列表如何从特定<li>调用函数答案

【问题标题】：dynamic list in javascript how to call function from specific <li>javascript中的动态列表如何从特定<li>调用函数
【发布时间】：2021-05-17 20:17:20
【问题描述】：

我从 API 获取消息列表并使用 javascript 创建一个动态数组。我希望在按下特定行时启动一个包含消息详细信息的新页面。如何在特定表行上调用 showMessage()？

var list = document.getElementById("listOfMessage");
init();
function init() {
    for (var i = 0; i < messageList.length; i++) {
        var message = messageList[i];
        var li = document.createElement("li");
        var a = document.createElement("a");
        var text = document.createTextNode("Nadawca: " + message.fullName);
        a.appendChild(text);
        a.setAttribute('onclick', showMessage(message));
        list.appendChild(li);
        //list.innerHTML += "<li><a href="showMessage(message)"><h2>Nadawca: " + message.fullName + " 
        //</h2></a></li>";
    }
    //list = document.getElementById("listOfTask");
}
function showMessage(message) {
    window.sessionStorage.setItem("message", JSON.stringify(message));
    window.location.href = 'message.html';
}

在上面的代码中，showMessage() 函数在数组初始化时立即被调用。如何让它只在点击一行后才运行？

我可以在init()函数的(a)或(li)元素中添加一个id属性，但是以后如何找到它并在这段代码中使用它：

var a = document.getElementById('1');
a.addEventListener('click', function() {
    window.sessionStorage.setItem("message", JSON.stringify(messageList[0]));
    window.location.href = 'message.html';
});

【问题讨论】：

a.setAttribute('onclick', () => showMessage(message));

标签： javascript onclick href addeventlistener

【解决方案1】：

我找到了解决这个问题的方法。使用此代码片段，我们可以为动态创建的列表中的特定元素调用函数。

function init() {
    for (var i = 0; i < messageList.length; i++) {
        var message = messageList[i];
        list.innerHTML += "<li id="+i+"><a onClick="+
        "><h2>Nadawca: " + message.fullName + "</h2></a></li>";
    }

    //$(document).on("click", "ui-content", function(){ alert("hi"); });
    $(document).ready(function() {

        $(document).on('click', 'ul>li', function() {  
            var idName = $(this).attr('id');
            showMessage(messageList[idName]);
        });
    });
}

【讨论】：