Question

我有一个调用PHP并分析结果以在同一页面中创建新的填充表单的表单。了解DOM是在jQuery事件处理程序之后更新的，并且通过.html（）创建了一个新表单，因此提交处理程序不适用于新表单。我也尝试了.on（）提交处理程序，但无济于事。创建新表单后，是否有一种方法可以重新生成DOM。我可以创建一个全新的页面，但是试图更动态地做到这一点。

<script src="js/jquery-3.3.1.min.js"></script>

<h2>Inventory:</h2>

<!-- form to get key detail of record in database -->
<form id="UPC_form" name="UPC_form" method="POST" action="mt_api/upc_lookup.php">
    <td>UPC:</td>
    <td><input type="text" name="UPC"  autofocus required></td>
    <td>Location:</td>
    <td><select id="LOCATION" name="LOCATION" required>
        <option value="1">1 - 1593 Central Ave</option>
        <option value="2">2 - Store 2 TDB</option>
    </select>
    </td>
    <input type="submit"  value="Search">
</form>
<br><br>
<div id="inventory_detail"></div>

清单_表单事件（如下）永远不会被看到，因为它所引用的表单尚未创建。当输入UPC值并通过.html（）和encodeURIcomponent写入结果时，将创建它。如何重新生成DOM或编写.on（）函数以引用尚不存在的内容？

<script>    
    $("#inventory_form").submit(function(e){
        e.preventDefault();
        alert("You entered a new inventory count and selected Quantity OK instead of Report Change");
    });
    $("#UPC_form").submit(function(e){
         e.preventDefault();

         /* get some values from elements on the page: */
         var $form = $(this),
             $submit = $form.find( 'button[type="submit"]' ),
             UPC_value = $form.find( 'input[name="UPC"]' ).val(),
             LOCATION_value = $form.find( 'select[name="LOCATION"]' ).val(),
             url = $form.attr('action');

         /* Send the data using post */
         var posting = $.post( url, {UPC: UPC_value, LOCATION: LOCATION_value});

         $(document).ready(function() {
         posting.done(function( data )
         {
             var record_array = data.split(" => ");
             var form_text = encodeURI('<form id="inventory_form" name="inventory_form" action="mt_api/inventory_handler.php" method="post"><table><tr><td><h2>Current System Qty:</td><td><input type="text" id="OLD_QTY" name="OLD_QTY" value=') + encodeURI(record_array[6].split(" ")[0]) +  encodeURI(' readonly /></h2></td></tr><tr><td colspan="2" style="text-align: center;"><input type="submit" id="approve" value="QTY OK" name="approve" style="width:100px; height:75px;" /></td></tr><tr><td>UPC:</td><td><input type="text" id="UPC" name="UPC" value="') + encodeURI(record_array[1].split("  ")[0]) +  encodeURI('" readonly required/></td></tr><tr><td>Name:</td><td><input type="text" id="NAME" name="NAME" value ="') + encodeURI(record_array[2].split("  ")[0]) +  encodeURI('" size="25" required/></td></tr><tr><td>Description:</td><td><input type="text" id="DESC" name="DESC" value="') + encodeURI(record_array[3].split("  ")[0]) +  encodeURI('" size="35" required/></td></tr><tr><td>Price:</td><td><input type="number" min="0" step="0.01" id="PRICE" name="PRICE" required value=') + encodeURI(record_array[4].split(" ")[0]) +  encodeURI(' /></td></tr><tr><td>Location:</td><td><select id="LOCATION" name="LOCATION"><option value="1">1 - 1593 Central Ave</option><option value="2">2 - Store 2 TDB</option></select></td></tr><tr><td>User:</td><td><input type="text" id="CLERK" name="CLERK" value=<?php echo $_SESSION['username'] ?> readonly/></td></tr><tr><td><h2>Inventoried QTY:</td><td><input type="number" min="0" id="INV_QTY" name="INV_QTY"/></h2></td></tr><tr><td>Note:</td><td><input type="text" id="NOTE" name="NOTE" size="40"/></td></tr><tr><td colspan="2" style="text-align: center;"><input type="submit" value="Report Change" name="change" style="width:100px; height:75px;"/></td></tr></table></form>');
             $( "#inventory_detail" ).html(decodeURIComponent(form_text))
         });
    });
    });
</script>
</body>

jQuery事件处理程序看不到更新的DOM

0 个答案: