页面已加载后，如何使用javascript创建元素后如何选择元素？

Question

I made a "Add new shipment" button that creates a whole div that includes like 4 fields and a 2nd submit button under all that. that 2nd submit button is supposed to post this new div onto the page and add it to db but I am having trouble selecting the fields and selecting the new submit button. I think this is because the page is already loaded from the beginning, so this new div cannot be selected anymore? Here is my HTML that is created from the "Add new shipment" button:

// adds new shipment
const ADD_SHIPMENT_GRAY = function (){
    return 
    <div class="shipment panel panel-success col-xs-2">
        <div class="shipmentblocks row">
            <div class="idzone btn-block classificationline">
                <!--  label  ---->
                <input type="text" class="customer btn btn-default btn-xs col-xs-12" placeholder="Customer"><strong id="customertext"></strong></button>
                <!--  contents -->
                <input type="text" class="btn btn-default btn-xs col-xs-12" placeholder="File Number">
                    <strong class="boldedlabels" id="filenumber"></strong>
                    <span class="labelcontents"></span>
                </button>
                <button type="button" class="etd btn btn-default btn-xs col-xs-12" placeholder="ETD" id="etd">
                    <strong class="boldedlabels"></strong>
                    <span class="labelcontents" id="etddatepicker">ETD</span>
                </button>
                <button type="button" class="eta btn btn-default btn-xs col-xs-12" placeholder="ETA" id="eta">
                    <strong class="boldedlabels"></strong>
                    <span class="labelcontents" id="etadatepicker">ETA</span>
                </button>
                <button type="button" class="shipmentsubmission btn btn-default btn-xs col-xs-12">
                    <strong class="boldedlabels eta"></strong>
                    <span class="labelcontents" id="submitnewshipment">Submit</span>
                </button>
            </div>
        </div>    
    </div>;
}

Here is my javascript code that executes the above code:

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());
    });
})
}

Answer 1

You are creating dynamic data which requires you to use .on in jquery, otherwise it will not find the element.

Also dont repeat id 's make it a class instead

$(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());
});

http://api.jquery.com/on/