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

Question

我从 API 获取消息列表并使用 javascript 创建一个动态数组。我希望在按下特定行时启动一个包含消息详细信息的新页面。如何在特定 table 行上实现对 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';
});

Answer 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]);
        });
    });
}

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

dynamic list in javascript how to call function from specific <li>

javascript

onclick

href

addeventlistener