0

フォームと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：最初に新しいコンテンツをロードします。2つ目は、ロードされたテーブルの行を強調表示します。ハイライトスクリプトは、ページ全体を更新する従来のページ設定で機能します。ただし、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);

このイベントを関数の2番目のパラメーターとして発生させるアイテムのセレクターを使用して、動的にロードされない要素に関数を接続する必要がありますon。.on詳細については、ドキュメントを確認してください。

そしてところで、あなたの関数の定義は内部にある必要はありません$(document).ready。

于 2013-02-05T00:22:03.053 に答える