如何在页面已经加载时用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创建元素后选择元素？

回答

相关问题