Javascript 获取具有动态内容的单击事件的元素id
学习JS和我的项目目前是创建一个收件箱(遵循CS50 Web应用程序课程)。这是一个单页应用程序,如下所示: 在我撰写电子邮件并将其发送至时,电子邮件会动态生成mike@mike.com. 这是我编写的代码,用于获取嵌套div中的动态内容Javascript 获取具有动态内容的单击事件的元素id,javascript,onclick,event-handling,dom-events,Javascript,Onclick,Event Handling,Dom Events,学习JS和我的项目目前是创建一个收件箱(遵循CS50 Web应用程序课程)。这是一个单页应用程序,如下所示: 在我撰写电子邮件并将其发送至时,电子邮件会动态生成mike@mike.com. 这是我编写的代码,用于获取嵌套div中的动态内容 // Get emails for inbox if (mailbox === 'inbox') { fetch('/emails/inbox') .then(response => response.json())
// Get emails for inbox
if (mailbox === 'inbox') {
fetch('/emails/inbox')
.then(response => response.json())
.then(emails => {
console.log(emails);
let inbox_container = document.createElement('div');
inbox_container.setAttribute("id", "inbox-container");
document.querySelector('#emails-view').append(inbox_container);
for (let i = 0; i < emails.length; i++) {
let email_id = i;
let email_header = document.createElement('div');
email_header.setAttribute("class", "email-header")
email_header.setAttribute("id", email_id);
email_header.addEventListener('click', function(event) {
console.log(event);
});
let sender = document.createElement('div');
sender.setAttribute("class", "email-header-sender");
sender.appendChild(document.createTextNode(emails[i].sender));
let subject = document.createElement('div');
subject.setAttribute("class", "email-header-subject");
subject.appendChild(document.createTextNode(emails[i].subject));
let timestamp = document.createElement('div');
timestamp.setAttribute("class", "email-header-timestamp");
timestamp.appendChild(document.createTextNode(emails[i].timestamp));
email_header.appendChild(sender);
email_header.appendChild(subject);
email_header.appendChild(timestamp);
document.querySelector("#inbox-container").append(email_header);
}
});
}
//获取收件箱的电子邮件
如果(邮箱=='收件箱'){
获取(“/电子邮件/收件箱”)
.then(response=>response.json())
。然后(电子邮件=>{
控制台日志(电子邮件);
让inbox_container=document.createElement('div');
收件箱_container.setAttribute(“id”、“收件箱容器”);
document.querySelector(“#emails view”).append(收件箱容器);
for(设i=0;i
我试图做的是在创建邮件头div时为每个邮件头div添加一个单击侦听器,因此我为它们分配了一个唯一的ID,该ID只是一个以0开头的数字
但是,我一直在尝试在单击事件中获取此ID。在事件的控制台日志中,我找不到这个ID,而且有太多多余的信息。这让我想到,必须有更好的方法来实现这一点
有什么想法吗 您可以轻松获得每个新元素的属性,如:
email_header.addEventListener('click', function(event) {
console.log( event.target.id );
});
或者说
email_header.addEventListener('click', function(event) {
console.log( this.id );
});
这回答了你的问题吗?