0

我已经使用表单和数据库调用将内容替换为 .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);
}

});
4

1 回答 1

0

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

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

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

像这样的东西：

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

您应该将您的函数与未动态加载的元素连接到您想要触发此事件作为函数中的第二个参数的项目的选择器on。检查.on文档以获取更多信息。

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

于 2013-02-05T00:22:03.053 回答