javascript可折叠事件侦听器呈现的按钮不工作

Question

当我试图使用firebase实时数据库创建一个笔记保护程序时，笔记的子射流是可折叠的(显示文本(，但在使用javascript渲染firebase中的内容后，可折叠按钮变为禁用

firebase.auth().onAuthStateChanged(function (user) {
if (user) {
var userId = firebase.auth().currentUser.uid;
var urlRef = firebase.database().ref("/user/" + userId + "/note/");
urlRef.once("value", function (snapshot) {
snapshot.forEach(function (data) {
var subject = data.val().Subject;
var text = data.val().Note;
var date = data.val().Date;
content += '<button style="font-weight: 900;" type="button" class="collapsible"> ' + subject + ' <span style="float: right;">' + date + '</span></button> ';
content += '<div class="content"> <p>' + text + '</p></div>';
});
$('#my_notes').append(content);

});
}
});

可折叠功能的代码是这个

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}

Answer 1

也许用document.createElement('el');函数创建按钮和内容段落并立即添加事件侦听器会更好。。。类似这样的东西：

firebase.auth().onAuthStateChanged(function (user) {
if (user) {
var userId = firebase.auth().currentUser.uid;
var urlRef = firebase.database().ref("/user/" + userId + "/note/");
urlRef.once("value", function (snapshot) {
snapshot.forEach(function (data) {
var subject = data.val().Subject;
var text = data.val().Note;
var date = data.val().Date;
// create button to contain subject and date
const button = document.createElement('button');
button.classList.add('collapsible');
button.style.fontWeight = 900;
button.innerHTML = `${subject}  <span style="float: right;">${date}</span>`;
// create paragraph to contain content and hide it
const content = document.createElement('p');
content.textContent = text;
content.style.display = 'none';

// add button and content to notes
$('#my_notes').append(button);
$('#my_notes').append(content);
// add click event listener to button
button.addEventListener('click', (event) => {
event.target.classList.toggle('active');
const content = event.target.nextElementSibling;
if (content.style.display == 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
});
});
}
});