Question

我制作了一个“添加新货件”按钮，创建了一个包含4个字段和第2个提交按钮的整个div。第二个提交按钮应该将这个新的div发布到页面上并将其添加到数据库但我无法选择字段并选择新的提交按钮。我认为这是因为页面已经从头开始加载，所以这个新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使其成为一个类

$(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/

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

1 个答案: