javascript - 每次单击带有事件侦听器的元素时，都会触发元素 innerHTML +=。但它只触发一次

Question

我创建了一个带有事件侦听器单击的 DOM 元素，我希望每次单击该元素时，容器元素的 innerHTML += 某些东西，但是在这些代码中，甚至看起来只触发一次并且在控制台中没有错误

<div id="main_structure_container" class="main_structure_container smart_body_main_container">
  <div id="row1" class="row element_row draggable_element" draggable="true">im a row</div>
</div>

<script>
   const click_tool = (event) => {
      console.log("clicked")
      let main_container = document.querySelector(".main_structure_container")

      main_container.innerHTML += `<div id="resize_box">
                                       <div id="resize_top" class="resize_bar" draggable="true"></div>
                                       <div id="resize_bottom" class="resize_bar" draggable="true"></div>
                                    </div>`
                            
      console.log(main_container.innerHTML)
     }


     let element_row = document.querySelectorAll(".element_row")

   element_row.forEach((the_row) => {
       the_row.addEventListener("click", click_tool)
   })
</script>

标签： javascripthtmldomevent-listener