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

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;

        }

  

  }

我希望弹出窗口能够隐藏，并且如果用户再次单击该按钮，则该按钮将具有功能以生成新的弹出窗口。