AJAX JQueryフォームの送信は一度しか動作しません（ページリフレッシュが必要です）

Question

ページが読み込まれると、結果が1つ取得できますが、入力を変更してupdate_formを再作成しようとすると何も表示されません。何か案は？パラメータをチェックすると、ブラウザは新しいパラメータを受け取りますが、明らかにクエリは再度実行されません。あなたは将来のAJAXリクエストこの方法で追加されます送信ボタンのクリックイベントハンドラをバインドする必要が

$(function() { 
       $("#select_form").submit(function (e) { 
        e.preventDefault(); 
        $.ajax({ 
         url: 'select_price.php', 
         data: $('#select_form').serialize(), 
         type: 'POST', 
         success: function (data) { 
          console.log(data); 

          if(data){ 
           $("#update_form").html(data); 
           $("#norecord").css('display','none'); 

          } 
          else{ 
           $("#norecord").css('display','block'); 

          } 

         }, 


        }); 

       }); 
       }); 

マイHTML

<form action="" method="post" id="select_form"><select style="max-width: 125px;border-radius:5px;" class="form-control" name="cus_no" autocomplete="off"> 
       <?php 

       $sql = "SELECT DISTINCT debcode FROM cicmpy WHERE cicmpy.region IS NOT NULL"; 
       $query = odbc_exec($conn, $sql); 
       while ($row = odbc_fetch_array($query)) { 
        echo '<option value="' . ($row['debcode']) . '">' .($row['debcode']) . ' </option>'; 
       } 


       ?> 

       </select ></div><label>Item Number</label><input style="max-width: 125px; border-radius:5px;" type="text" class="form-control" id="auto_item" name="item_no"/> 
         <button style="margin-top: 15px;" type="submit" name="update" class="btn btn-primary">Manage</button> 
         <button style="margin-top: 15px;" type="button" name="new_price" id="new_price" class="btn btn-success pull-right">New Price</button></div> 
     </div> </div> 
        </div> 
     </div> 
      </form> 

Answer 1

まず、あなたのHTMLに、あなたのボタンid="btn_manage"を与えるとtype="submit"を削除し、そうでないあなただけの代わりに、AJAXを使用しての（あなたのページがさわやかである理由である）の形を投稿しています。あなたのJavascriptで、$("#select_form").submit(function (e) {のものを取り除き、AJAXを実行するボタン自体のイベントハンドラを登録するだけです。

HTMLの更新してから、これを試してください：あなたは、あなたのHTML（全形）のより多くを表示することができます

<script> 
    $(function() { 
     $("#btn_manage").on("click", function() { 
      $.ajax({ 
       url: 'select_price.php', 
       data: $('#select_form').serialize(), 
       type: 'POST', 
       success: function (data) { 
        console.log(data); 

        if(data){ 
         $("#update_form").html(data); 
         $("#norecord").css('display','none'); 

        } else { 
         $("#norecord").css('display','block'); 

        } 

       }, 
       error: function(data) { 
        console.log("Error: " + data) 
       } 
      }); 
     }); 
    }); 

    </script> 

Answer 2

。

$(function() { 
    $("#select_form").submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: 'select_price.php', 
     data: $('#select_form').serialize(), 
     type: 'POST', 
     success: function(data) { 
     console.log(data); 

     if (data) { 
      $("#update_form").html(data); 
      $("#norecord").css('display', 'none'); 

     } else { 
      $("#norecord").css('display', 'block'); 

     } 

     }, 


    }); 

    }); 

    //Bind click event listener to the submit button 
    $(document).on('click', 'button[type="submit"]', function() { 
     $(this).parents('form').submit(); 
    }); 
});