Question

问题：如何使克隆按钮上的eventListeners处于活动状态？

说明：我正在使用HTML，CSS和Vanilla Javascript（必填，没有jquery或其他库）来构建插件。功能之一是为组织的程序提供多个地址。同样，一个组织可以有多个程序。
视觉：
（简单）组织>程序[地址]
（复杂）组织>程序[地址，地址1]，程序1 [地址2，地址3]
用于创建新地址的按钮位于地址表单本身，因为它需要追加到它所在的相同程序中。
问题是我丢失了克隆上的“添加地址”按钮的功能。我知道我需要为新的HTML按钮更新Javascript的addEventListeners。我知道它实际上只是再次调用同一函数，但是我不想创建一个循环，我觉得这是一个不好的做法。

很抱歉，如果这是一个新手问题，我没有要帮助我的sr
代码：：

var addProgramButton = document.getElementById("cloneAddress")
for (var i = 0; i < addProgramButton.length; i++){
     //code that clones and appends
     // Right now I am just calling the same thing again
     // var addProgramButton = document.getElementById("clone...)
 }

*感谢您的贡献。什么在起作用

//初始侦听器

    var cloner2 = 
 document.getElementsByClassName('cloneProgramDetailsButton')
 for (var i = 0; i < cloner2.length; i++){
   cloner2[i].addEventListener('click', function(e){
    addAddress(e)
 })
 }

 //Function for cloning

function addAddress(event){
  console.log("did this trigger it", event)
   var boxes = document.getElementById("cloneProgramDetails");
          var clone = boxes.cloneNode(true);
          var inputElements = clone.querySelectorAll("input");
                for(var i = 0; i < inputElements.length; i++){
                  inputElements[i].value = '';
                  var nameBuilding = inputElements[i].name.split('_')
                  if(nameBuilding.length > 1){
                    inputElements[i].name = nameBuilding[0] + 
    myTicker + "_" + nameBuilding[1];
                  } else {
                    inputElements[i].name = nameBuilding[0] + 
    myTicker
                  }
                }

       event.originalTarget.parentNode.parentNode.parentNode.appendChild(clone)

   var cloner2 = document.getElementsByClassName('cloneProgramDetailsButton')
  for (var i = 0; i < cloner2.length; i++){
    cloner2[i].addEventListener('click', function(e){
        addAddress(e)
    })
  }
}

在浅拷贝/克隆上更新eventListener

0 个答案: