由 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');并立即添加事件侦听器可能会更好。... 是这样的：&nbsp; &nbsp; firebase.auth().onAuthStateChanged(function (user) {&nbsp; &nbsp; &nbsp; if (user) {&nbsp; &nbsp; &nbsp; &nbsp; var userId = firebase.auth().currentUser.uid;&nbsp; &nbsp; &nbsp; &nbsp; var urlRef = firebase.database().ref("/user/" + userId + "/note/");&nbsp; &nbsp; &nbsp; &nbsp; urlRef.once("value", function (snapshot) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; snapshot.forEach(function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var subject = data.val().Subject;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var text = data.val().Note;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var date = data.val().Date;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // create button to contain subject and date&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const button = document.createElement('button');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button.classList.add('collapsible');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button.style.fontWeight = 900;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button.innerHTML = `${subject}&nbsp; <span style="float: right;">${date}</span>`;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // create paragraph to contain content and hide it&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const content = document.createElement('p');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content.textContent = text;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // add button and content to notes&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#my_notes').append(button);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#my_notes').append(content);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // add click event listener to button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button.addEventListener('click', (event) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.target.classList.toggle('active');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const content = event.target.nextElementSibling;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (content.style.display == 'block') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content.style.display = 'block';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });