我一次使用后所有按钮都失去功能

Question

我有一个显示自定义对话框的按钮。如果用户选择“取消”，则应从DOM中删除该对话框，并且不采取进一步的措施。如果他们单击“开始删除”，则应继续输入代码。对话框正确显示和隐藏，但是，当我取消并隐藏对话框后，该按钮将不再起作用以再次显示该对话框。我创建了一个使用模板字符串显示弹出窗口的弹出窗口类，然后将其注入到DOM中。弹出窗口在构造函数中接受一个回调，我用它来隐藏弹出窗口。请参阅以下JS小提琴：https : //jsfiddle.net/khgriffi259/vs6r5ake/13/  class Popup {    constructor(title, message, callback) {      this.title = title;      this.message = message;      this.callback = callback;      this.container = document.querySelector('body');      this.result = '';    }      init() {      const popup = `          <div class="popup-wrapper">              <div class="popup bg-white p-1">                  <div class="popup-close">X</div>                  <div class="popup-content ">                      <h2 class="">${this.title}</h2>                      <p class="p-1 my-2">${this.message}</p>                      <div class="dialogue_buttons my-1">                          <button class="btn popup-no" >Cancel</button>                          <button class="btn btn-danger my-1 popup-yes" >Start Delete</button>                      </div>                  </div>              </div>          </div>        `;      this.container.innerHTML += popup;        this.container.querySelector('.popup-no').addEventListener('click', () => this.cancelListener());      this.container.querySelector('.popup-yes').addEventListener('click', () => this.startListener());      }      cancelListener() {      this.result = false;            this.callback();    //   if (this.callback !== undefined) {    //     this.callback(this.result);    //   }    }      startListener() {      this.result  = true;      if (this.callback !== undefined) {        this.callback();      }    }             getResult() {         console.log(this.result) ;        return this.result;        }    }我希望弹出窗口能够隐藏，并且如果用户再次单击该按钮，则该按钮将具有功能以生成新的弹出窗口。