由javascript可折叠事件侦听器呈现的按钮不起作用答案

【问题标题】：Button rendered by javascript collapsible event listener not working由javascript可折叠事件侦听器呈现的按钮不起作用
【发布时间】：2020-10-18 08:12:44
【问题描述】：

我正在尝试使用 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";
        }
    });
}

【问题讨论】：

每次从 firebase 更新后，您是否附加监听器？
是的，我做到了，但它仍然无法折叠按钮
好吧，如果您真的按照@pilchard 的要求从firebase 每次更新后附加了侦听器，那么您可以考虑在您附加的内容中生成按钮和段落，作为JavaScript 对象并添加eventListener，让我发布一个答案

标签： javascript html firebase firebase-realtime-database

【解决方案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';
              }
            });
         });
        });
      }
    });

【讨论】：