要素が既に読み込まれているときにjavascriptで作成した後に要素を選択する方法はありますか？

Question

私は、4つのフィールドのような全体のdivを作成し、すべての下に2番目の送信ボタンを作成する "新しい貨物の追加"ボタンを作成しました。その2番目の送信ボタンは、この新しいdivをページに投稿してdbに追加するはずですが、フィールドの選択と新しい送信ボタンの選択に問題があります。これはページがすでに最初から読み込まれているためだと思うので、この新しいdivはもう選択できません。ここで、「新しい出荷を追加」ボタンから作成された私のHTMLです：ここでは

// 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>; 
} 

は、上記のコードを実行し、私のjavascriptのコードは次のとおりです。

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

あなたがする必要が動的なデータを作成していますjqueryに.onを使用してください。そうしないと、要素が見つかりません。

もid年代を繰り返していけないあなたは、彼らが定義することによって一意である...ページで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()); 
}); 

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