Delete 函数运行一次，然后从其余元素 [JavaScript 模块] 中卸载

Question

我一直在练习使用 JavaScript 模块，我需要有人帮助我理解为什么删除功能无法正常工作。我假设在我添加一个人之后，绑定会发生什么？

(function() {
  let people = {
    people: ['will', 'john'],
    init() {
      this.cacheDOM();
      this.render();
      this.bindingEvents();
    },
    cacheDOM() {
      this.$inputVal = document.getElementById('input');
      this.$target = document.getElementById('template');
      this.$button = document.getElementById('btn');
      this.$DOMLis = document.getElementsByClassName('elems');
    },
    bindingEvents() {
      this.$button.addEventListener('click', this.addName.bind(this));
      //Adding event listener "delete" to the lis
      this.$keys = Object.keys(this.$DOMLis);
      this.$keys.map(val => {
        this.$DOMLis[val].addEventListener('click', this.remove.bind(this));
      });
    },
    render() {
      this.$target.innerHTML =
        '<ul>' +
        this.people
          .map((val, i) => {
            return `<li key=${i} class='elems' name='${val}'>${val}</li>`;
          })
          .join('') +
        '</ul>';
    },
    addName() {
      this.people.push(this.$inputVal.value);
      this.render();
    },
    remove(e) {
      let index = parseInt(e.target.getAttribute('key'));
        this.people.splice(index, 1);


      this.render();
    },
  };

  people.init();
})();

这是 HTML

<div id="root">
  <div id="template"></div>
  <input id="input" type="text" />
  <button id="btn">un</button>
</div>

<script type="text/javascript" src="./script.js"></script>

addPerson 函数似乎与其他所有函数都能正常工作，但 delete 函数却不行。

Answer 1

您的 bindingEvents() 函数向 render() 函数创建的每个 elems 添加了一个点击事件侦听器。下次调用 render() 时（在添加或删除之后），所有 elems 都将被删除并重新创建，但不会重新添加侦听器。每次渲染时，您都需要更改 render() 的工作方式，或者将点击事件侦听器重新添加到每个 elems。

Delete 函数运行一次，然后从其余元素 [JavaScript 模块] 中卸载

The Delete function works once, then unmounts from the rest of the elements [JavaScript Modules]

javascript

html

node-modules

object-literal