javascript 中的动态列表如何从特定 <li> 调用函数
dynamic list in javascript how to call function from specific <li>
我从 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';
});
我找到了解决这个问题的方法。
使用此代码片段,我们可以为动态创建的列表中的特定元素调用函数。
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]);
});
});
}
我从 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';
});
我找到了解决这个问题的方法。 使用此代码片段,我们可以为动态创建的列表中的特定元素调用函数。
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]);
});
});
}