为什么addeventListener（）事件失效？

Question

为什么点击事件函数只能执行一次？

const dataArr = [

  {
    id: 1,
    icon: 'http://autumnfish.cn/static/火龙果.png',
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'http://autumnfish.cn/static/荔枝.png',
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'http://autumnfish.cn/static/榴莲.png',
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'http://autumnfish.cn/static/鸭梨.png',
    isChecked: true,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'http://autumnfish.cn/static/樱桃.png',
    isChecked: false,
    num: 20,
    price: 34,
  },
]

// 个数添加功能

const jia = document.querySelectorAll('.increase')
const jian = document.querySelectorAll('.decrease')
for (let i = 0; i < jia.length; i++) {
  jia[i].addEventListener('click', function () {
    console.log(123)
    dataArr[i].num++
    render(dataArr)
    // console.log(arr2)
    // render(arr2)
  })
}

以上代码我运行的时候，第一次是能执行的，功能也是正常，但是再次点击后没有反应了？也没有报错。

我以为是通过for循环多次绑定事件有问题，但是只对一个标签绑定事件也只能执行一次。

我查询过答案，得到一个类似的答案，说是通过innerHTml实现会让页面重新渲染Dom元素，我的代码也会进行一次数据处理然后重新渲染？是这个问题导致的绑定事件失效了吗？求解答。

Answer 1

查到的答案没问题，innerHtml会把当前元素的内容替换为新的内容，而点击事件绑定也会随着替换而销毁，只有在替换后重新绑定才生效。

所以，一般这种场景建议用事件委托方式，在希望通过innerHtml替换内容的元素父节点上绑定点击事件，通过事件回调函数里面的传入的参数event.target， 判断是点击了➕ 还是➖。