在纯 javascript 的动态对象中，事件仅执行一次而不是始终执行

Question

我有一个菜单，仅在单击/触摸事件后才会显示。

想象一下这种情况：

 <ul id="menu" class="ul-level1">
    <li id="menu-li-1" class="li-level1"><a href="#">word 1 level 1</a></li>
        <li id="menu-li-2" class="li-level1 haschildren"><a href="#">word 2 level 1</a>
                   <ul id="menu-ul-1" class="ul-level2">
                        <li id="menu-li-3" class="li-level2"><a href="#">word 1 level 2</a></li>
                        <li id="menu-li-4" class="li-level2 haschildren"><a href="#">word 2 level 2</a>
                           <ul id="menu-ul-2" class="ul-level3">
                                <li id="menu-li-5" class="li-level3"><a href="#">word 1 level 3</a></li>
                            </ul><!--end level 3 UL-->
                        </li><!--end level 2 LI 1-->
                        <li id="menu-li-6" class="li-level2"><a href="#">word 3 level 2</a>
                           <ul id="menu-ul-3" class="ul-level3 ">
                                <li id="menu-li-7" class="li-level3 haschildren"><a href="#">word 2 level 3</a></li>
                            </ul><!--end level 3 UL-->
                        </li><!--end level 2 LI-->
                    </ul><!-- end level 2 UL 2-->
         </li><!-- end level 1 LI-->
</ul><!--end level 1 UL-->

<div id="wall" style="display:grid; grid-template-columns: 1fr 1fr 1fr;">
        
</div>
<script>
 document.addEventListener("DOMContentLoaded",function(event){
                    let has_sons = document.querySelectorAll('ul li .haschildren');
                    let wall = document.querySelector("#wall");
                         has_sons.forEach((ul_li) => {
                             ul_li.addEventListener("click", function(li){
                             let li_container_id = this.parentNode.id;
                             let li_container_id_element = document.getElementById(li_container_id);
                             if(!document.getElementById(li_container_id+"-wall")){
                               var nuovo_elemento = document.createElement('div');
                                    nuovo_elemento.id = li_container_id + "-wall";  
                                    nuovo_elemento.classList.add("col1");
                                    wall.appendChild(nuovo_elemento);
                                   //instaziare COL2
                                   var nuovo_elemento = document.createElement('div');
                                    nuovo_elemento.id = li_container_id + "-wall";  
                                    nuovo_elemento.classList.add("col2");
                                    wall.appendChild(nuovo_elemento);
                                   //instaziare COL3
                                   var nuovo_elemento = document.createElement('div');
                                    nuovo_elemento.id = li_container_id + "-wall";  
                                    nuovo_elemento.classList.add("col3");
                                    wall.appendChild(nuovo_elemento);
                               let new_container = document.getElementById(li_container_id + "-wall"); //id del sottomenu per la sezione appendix
                               let this_clone = this.cloneNode(true); //ELEMENTO SU CUI SI È FATTO "CLICK"
                                 this_clone.id = this.parentNode.id+'_goku';
                                 this_clone.classList.add(this_clone.id);
                                 this_clone.classList.add("_goku");
                               new_container.appendChild(this_clone);
                               let ul_li_ul = li_container_id_element.querySelector('ul');
                               new_container.appendChild(ul_li_ul);
                               var colonna2 = document.getElementsByClassName("col2")[0];
                               var colonna3 = document.getElementsByClassName("col3")[0];
                               //inizio controllo su click menu di secondo livello con apertura al terzo livello
                             let hafigli_liv2 = wall.querySelectorAll('ul li.haschildren');
                             hafigli_liv2.forEach((ul_li_liv2) => {
                             ul_li_liv2.currentTarget.addEventListener("click", function(link_liv2){
                             link_liv2.preventDefault(); //evita che cambi pagina
                             let link_liv2_clone = this.cloneNode(true);
                             let link_liv2_clone_a = link_liv2_clone.querySelector('li a');
                             let li_container_id_liv2 = this.parentNode.parentNode.id; 
                                if(!document.getElementById(li_container_id_liv2+"-wall-col2")){
                                 link_liv2_clone.id = li_container_id_liv2+"-wall-col2";
                                 let original_colonna2 = colonna2.cloneNode(true);
                                 colonna2.innerHTML = '';
                                 colonna2.appendChild(link_liv2_clone);
                                                              
  //inizio controllo su click menu di terzo livello con apertura al secondo livello
                               let hafigli_liv3 = document.querySelectorAll('.col2 li ul li.haschildren'); 
                               hafigli_liv3.forEach((ul_li_liv3) => {
                             ul_li_liv3.addEventListener("click", function(link_liv3){
                             link_liv3.preventDefault(); //evita che cambi pagina
                             let link_liv3_clone = this.cloneNode(true);
                             let link_liv3_clone_a = link_liv3_clone.querySelector('li a');
                             let li_container_id_liv3 = this.parentNode.parentNode.id; 
                                if(!document.getElementById(li_container_id_liv3+"-wall-col3")){
                                 link_liv3_clone.id = li_container_id_liv3+"-wall-col3";
                                 let original_colonna3 = colonna3.cloneNode(true);
                                 colonna3.innerHTML = '';
                                 colonna3.appendChild(link_liv3_clone);
                                                                  }
                             
                             });
                                                          });
                             }
                             });
                             });
                             }
                           });
                           //FINE click menu di primo livello con sottolivelli
                                 });
 
                  });
 </script>

• 出于您可以想象但与此问题无关的原因，以“菜单”作为自己的 ID 的 UL 不可见；
• 在 DOMContentLoaded 中，带有 getElementById 选择器的 #menu 将克隆到 .col1 元素处的 #wall，该元素具有要显示的 CSS 指令：无子菜单，因此只能看到： 单词 1 级别 1 和 单词 2 级别 1
• 此时，如果用户单击 word 2 level 1，则只会克隆其子菜单 (.ul-level2) 并显示在 #wall .col2 元素中，该元素具有要显示的 CSS 指令：无子菜单，因此此时您可以看到：word 1 level 2 AND word 2 level 1 at .col1, word 2 level 2 at .col2
• 此时，如果用户单击 word 2 level 2，其子菜单 (.ul-level2) 将被克隆并显示在 #wall .col3。

这个Javascript适用于一些queryselectorAll，仅此而已，第一次触摸它可以工作，但它不再工作，浏览器在第二次点击时不会告诉任何问题： 例如，如果在单击 word 2 level 2 并动态填充 .col3 之后，他单击 word 3 level 2 任何内容都会改变现有技术。

有谁可以帮忙吗？

Answer 1

我尝试按照本网站某处的阅读内容编辑某些行，但没有结果

ul_li.addEventListener("click", function(lk){
                            const link = lk.target.closest('a');
                        link.preventDefault(); //evita che cambi pagina

但没有任何改变...无论如何它都不起作用

这个网站上有没有人可以在这种情况下提供帮助？