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

Question

我有一个显示自定义对话框的按钮。如果用户选择“取消”，则应从 DOM 中删除对话框，并且不会采取进一步的操作。如果他们点击“开始删除”，它应该继续处理代码。

对话框显示和隐藏都正确，但是，我取消并隐藏对话框后，按钮不再起作用，无法再次显示对话框。

我创建了一个弹出类，它使用模板字符串来显示弹出窗口，然后将其注入(inject)到 DOM 中。弹出窗口在构造函数中接受一个回调，我用它来隐藏弹出窗口。

请看下面的 JS Fiddle: 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;
        }

  
  }

    //end of Popup Class

const button = document.querySelector('button');
button.addEventListener('click',  e => {
  if (e.target.tagName === 'BUTTON') {
    
    const confirmDelete = new Popup(
      'Delete', 
      'This will permanently delete this experience record.',
      ()=>{
        console.log('hello');
        let elem = document.querySelector('.popup-wrapper');
        elem.parentNode.removeChild(elem);
        
      }
    );
    confirmDelete.init();
     }
})

<button>
click me
</button>

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

Answer 1

请参阅下面的代码固定版本。

唯一的变化来自

this.container.innerHTML += popup;

到

this.container.insertAdjacentHTML('beforeend', popup);

您的原始代码失败的原因是 .innerHTML 将 DOM 树序列化回 HTML 字符串，附加 popup，然后分配给 .innerHTML 重新分析整个事情，从头开始重新创建所有元素。作为副作用，您原来的 click 监听器丢失了，因为它仍然附加到旧的 button 元素。分配给 .innerHTML 意味着您将获得一个全新的 DOM 树。

作为the documentation for insertAdjacentHTML状态:

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.

(强调我的。)

  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.insertAdjacentHTML('beforeend', 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;
        }

  
  }

    //end of Popup Class

const button = document.querySelector('button');
button.addEventListener('click',  e => {
  if (e.target.tagName === 'BUTTON') {
    
    const confirmDelete = new Popup(
      'Delete', 
      'This will permanently delete this experience record.',
      ()=>{
        console.log('hello');
        let elem = document.querySelector('.popup-wrapper');
        elem.parentNode.removeChild(elem);
        
      }
    );
    confirmDelete.init();
     }
})

<button>
click me
</button>