Question

我使用form和db调用替换了.post（）的内容。新内容是来自php查询的另一种表单和数据表。然后我在新表上使用新表单来更改一些css。但是，当我在新表单中输入数据时，在单击事件上，内容将恢复为原始内容。我知道我没有改变页面内容的服务器端，但我认为jQuery适用于当前的DOM。

原创内容：

<div id="bodyContent">
 <form id="usualValidate" class="mainForm" method="post" action="">
 <label>Barcode:<span>*</span></label>
  <input type="text" class="required" name="startBarcode" id="startBarcode"/>
  <input type="submit" value="submit" class="blueBtn" id="startBtn" />
 </form>
</div>

替换内容：

<div id="bodyContent">    
 <form id="checkinProcess" class="mainForm" method="post" action="">
  <label>Barcode:<span>*</span></label>
  <input type="text" class="required" name="processBarocdes" id="processBarcodes"/>
  <input type="submit" value="submit" class="blueBtn" id="submitBtn" />
</form>
<table id="shippedBarcodesTable">
  <thead>...</thead>
  <tbody id="shippedBarcodes">
    <tr id="B000503513">...</tr>
    <tr id="B000496123">...</tr>
  </tbody>
</table>
</div>

JS：第一个加载新内容。第二个突出显示了加载的表中的一行。突出显示脚本适用于具有整页刷新的传统页面设置。但是尝试使用jQuery加载动态表，然后使用后续jQuery突出显示表中的一行，使其恢复为原始源内容。

$(document).ready(function() {

$("#startBtn").on("click", startCheckin);
function startCheckin(sevt) {
  sevt.preventDefault();
  var startBC = $("#startBarcode").val();
  $.post("checkin_process.php",
    {startBarcode : startBC},
     function(data) {
       $("#bodyContent").html(data);
     });
}

$("#submitBtn").on("click", highlight); 
function highlight(hevt) {
  hevt.preventDefault();
  var scanbc = $("#processBarcodes").val();
  $("#" + scanbc).addClass("curChecked");
  $('html, body').animate({scrollTop: $("#" + scanbc).offset().top-150}, 750);
}

});

Answer 1

您的highlight函数永远不会被调用，因为它没有与动态创建的按钮连接。由于调用了提交按钮的默认操作 - 提交表单并且页面正在刷新，因为没有定义操作URL。这就是为什么你看到$.post电话之前的页面。

要解决此问题，您应该更改此行

$("#submitBtn").on("click", highlight);

这样的事情：

$("body").on("click", "#submitBtn", highlight);

您应该将函数与未动态加载的元素连接，并将要作为on函数中的第二个参数触发此事件的项目的选择器连接起来。查看.on documentation了解详情。

而且顺便说一句，你的函数的定义不必在$(document).ready内。

jQuery .post（）内容通过后续的jQuery调用恢复为原始内容

1 个答案: