如何在頁面已經加載時用javascript創建元素後選擇元素？

我做了一個「添加新貨物」按鈕，創建一個包含4個字段和第二個提交按鈕的整個div。第二個提交按鈕應該發佈這個新的div到頁面上，並將其添加到數據庫，但我無法選擇字段並選擇新的提交按鈕。我認爲這是因爲頁面已經從一開始就加載了，所以這個新的div不能再被選中了？這是我的HTML是從「添加新貨」按鈕創建：如何在頁面已經加載時用javascript創建元素後選擇元素？

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

來源

2017-02-03 Chris

你不能重複的ID在一個頁面中首發...他們被定義獨一無二的。 – charlietfl

你確實有一些破碎的HTML。在第一次和第二次輸入之後有''錯過了它們的開啓者。另外，爲什麼HTML必須放在JS函數中，是否有特定的原因？ –

謝謝。哦，我在javascript函數中創建了html，因此它在javascript中創建了一個新的html元素，因爲如果它是在html中，我不知道如何克隆整個html元素。就像我知道我可以爲$ jQuery（選擇器）.clone（）爲jQuery，但我不知道如何使用它來重置值，當我這樣做 – Chris

你正在創建，這就需要你的動態數據在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()); 
});

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

來源

2017-02-03 19:05:12

如何在頁面已經加載時用javascript創建元素後選擇元素？

回答

相關問題