Javascript 我应该如何在“a”上引用js；输入“；“生成的标记”；addChild“；功能？

我使用“复制”功能生成新对象（e1、e2、e3……），下面是我的代码

<script src="js檔/設備/drag.js"></script>
.
.
.
<script>
var id_num=0;
var wid=0;
function copy(){
    var d1=document.getElementById("back_for_equi");
    var input=document.createElement("input");

    id_num=id_num+1;

    input.type="image";
    input.src="種子社群街區/設備切片/實際大小/設備1(106.86X266.42px).png";
    input.id="e"+id_num;
    input.className="drag";
    //why can't "drag" function run?
    input.style.position="absolute";
    input.style.height="100px";
    input.style.left=50+wid+"px";
    wid=50+wid;
    input.zIndex="3";
    input.style.touchAction="none";
    document.body.appendChild(input);
    //new object will show like 
    //<input type="image" src="種子社群街區/設備切片/實際大小/設備 
    //1(106.86X266.42px).png" id="e2" class="drag" style="position: 
    //absolute; height: 100px; left: 100px; touch-action: none;">
    }
</script>

---

我认为drag.js是正确的，因为如果我在另一个对象上引用它，它就会正常工作。但如果我在一个新对象“e2”上使用它，它就不起作用，但“Console”没有显示任何错误。因为拖动可以作用于另一个对象，例如“equi1”，但仅在新对象上不起作用，所以这个问题可能是由“顺序”问题引起的？

我认为在添加任何新元素后，应该再次调用

addEventListener

函数。如果在页面加载时仅调用一次

addEventListener

函数，则会丢失新添加的元素。此外，您应该注意如何选择新添加的元素，不要为以前的元素添加重复的事件。

谢谢您的帮助！我解决了这个问题，并且学到了将事件引用到新对象中的经验！谢谢！！好啊我已经做了！

$(function(){
    var dragItem = document.querySelector("#e2");
    var container = document.querySelector("body");
    var active = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;
            /*偵聽器處理觸控事件*/
    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);
            /*偵聽器處理滑鼠事件*/
    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);
function dragStart(e) {
    if (e.type === "touchstart") {
        initialX = e.touches[0].clientX - xOffset;
        initialY = e.touches[0].clientY - yOffset;
        } else {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;
        }

    if (e.target === dragItem) {
        active = true;
        }
    }


function dragEnd(e) {
    initialX = currentX;
    initialY = currentY;

    active = false;
    }

function drag(e) {
    if (active) {

    e.preventDefault();

    if (e.type === "touchmove") {
        currentX = e.touches[0].clientX - initialX;
        currentY = e.touches[0].clientY - initialY;
    } else {
        currentX = e.clientX - initialX;
        currentY = e.clientY - initialY;
    }

    xOffset = currentX;
    yOffset = currentY;

    setTranslate(currentX, currentY, dragItem);
    }
    }

function setTranslate(xPos, yPos, el) {
    el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
    dragStart("#e2")
})