由 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';

              }

            });

         });

        });

      }

    });