当页面已经加载时，如何在使用javascript创建元素后选择该元素？

我制作了一个“AddNewShipping”按钮，它创建了一个完整的div，其中包括4个字段和第二个submit按钮。第二个提交按钮应该将这个新的div发布到页面上并添加到db中，但是我在选择字段和选择新的提交按钮时遇到了问题。我想这是因为页面已经从一开始就被加载了，所以这个新的div不能再被选择了？以下是通过“添加新装运”按钮创建的我的HTML：

---

您正在创建需要在jquery中使用

.on

的动态数据，否则它将找不到元素

也不要重复

id

，而是让它成为一个类

$(document).on('click', '.addshipment', function () { 
    // in console, indexes closer to 0 (ex: index [0]) = newer
    //$(".shipment:first").before(ADD_SHIPMENT_GRAY());
    // add new shipment green block
    $("#zzz").html(ADD_SHIPMENT_GRAY());
});

---

对于初学者来说，你不能在页面中重复ID…它们的定义是唯一的。你确实有一些坏掉的HTML。在第一次和第二次输入后，有

缺少其开启器。另外，HTML必须放在JS函数中有什么特别的原因吗？谢谢。哦，我在javascript中创建了html函数，因此它在javascript中创建了一个新的html元素，因为我不知道如何克隆html中的整个html元素。就像我知道我可以为jQuery执行$（selector）.clone（），但我不知道在执行此操作时如何使用它重置值

const SCRIPTS = function (){
$(function(){
    const addshipment = $("#addshipment"),
          labelsubmission = $(".labelsubmission"),
          shipment = $(".shipment"),
          shipmentblocks = $(".shipmentblocks"),
          idzone = $(".idzone"),
          etd = $(".etd"),
          addsubmit = $("#addsubmit"),
          zzz = $("#zzz"), // div to keep maximum new shipment as 1
          submitnewshipment = $("#submitnewshipment"), // button to submit the new shipment 


    // Add New Shipment
    addshipment.click(() => { // in console, indexes closer to 0 (ex: index [0]) = newer
        //$(".shipment:first").before(ADD_SHIPMENT_GRAY());
        // add new shipment green block
        $("#zzz").html(ADD_SHIPMENT_GRAY());
    });
})
}

$(document).on('click', '.addshipment', function () { 
    // in console, indexes closer to 0 (ex: index [0]) = newer
    //$(".shipment:first").before(ADD_SHIPMENT_GRAY());
    // add new shipment green block
    $("#zzz").html(ADD_SHIPMENT_GRAY());
});