使用ajax加載表單然後再次使用ajax提交

Question

我有一個頁面，我正在顯示一些信息。您可以選擇一個選項，然後頁面會通過使用Ajax響應加載的形式顯示錶單：

 $("body").on("change", "#patient_id", function(event){ 

     var prescription_id = $(this).val(); 
     event.preventDefault(); // disable normal link function so that it doesn't refresh the page 


     var curr_data = { 
        action: 'refferedcall', 
        prescription_id: prescription_id,   
        dataType: 'json' 
        }; 

        $.post(hmgt.ajax, curr_data, function(response) { 

         $('.prescription_content').html(response);  
         return true; 
        }); 
    }); 

這工作得很好。但這種觀點是一種形式。然後我想用Ajax提交包含的表單。但我似乎無法做到。我認爲這是因爲如果我爲表單設置了按鈕處理程序，它不起作用，因爲當加載主頁面和JQuery腳本時表單不存在。

所以要清楚，我使用JQuery和Ajax加載將此div加載到我的主頁上。然後我只想簡單地用Ajax提交這個表單。

<div class="prescription_content"> 
<div class="title">Submit News</div> 
    <form role="form" id="ref_form" name="ref_form_p"> 
     <div class="form-group"> 
      <label for="pat_ref_hosp">Hospital to Refer:</label> 
      <input type="text" class="form-control" id="pat_ref_hosp" name="pat_ref_hosp" value="<?php if(!empty($result->reffer_hospital)){ echo $result->reffer_hospital; }?>"> 
      </div> 

      <input type="hidden" class="form-control" id="pres_note" name="pres_note" value="<?php echo $result->priscription_id ;?>"> 

      <button type="button" id="<?php echo $result->priscription_id ;?>" class="btn btn-success reffering_status">Refer Now</button> 
     </form> 
</div> 

TIA

然後我提交的形式再次使用通過下面的按鈕單擊事件AJAX：

$("body").on("click", ".reffering_status", function(event){ 

     event.preventDefault(); // disable normal link function so that it doesn't refresh the page 

     var prescription_id = $("#pres_note").val(); 

     var pat_ref_hosp = $("#pat_ref_hosp").val(); 

     var curr_data = { 
        action: 'reffering_status',   
        dataType: 'json', 
        prescription_id: prescription_id, 
        pat_ref_hosp : pat_ref_hosp, 
        }; 
        console.log(curr_data); 
     )}; 

這裏的日誌顯示

Object {action: "reffering_status", dataType: "json", prescription_id: "1", pat_ref_hosp: ""} 

pat_ref_hosp是空的 我不知道如何在O顯示阿賈克斯的jsfiddle https://jsfiddle.net/3ggq3Ldm/

Answer 1

是你正在做的，它不會工作，因爲DIV的內容，您加載，在路上沒有加載到DOM時，你最初的

$("body").on("click", ".reffering_status", function(event){}); 

通話製作。

---

如果我理解正確你，這是你要實現的行爲：

$("#patient_id").on("change", function(event) { 
    var prescription_id = $(this).val(); 
    event.preventDefault(); // disable normal link function so that it doesn't refresh the page 

    var curr_data = { 
     action: 'refferedcall', 
     prescription_id: prescription_id,   
     dataType: 'json' 
    }; 

    $.post(hmgt.ajax, curr_data, function(response) { 
     $(".prescription_content").html(response);  

     $(".reffering_status").on("click", function(event){ 
      event.preventDefault(); // disable normal link function so that it doesn't refresh the page 

      var prescription_id = $("#pres_note").val(); 

      var pat_ref_hosp = $("#pat_ref_hosp").val(); 

      var curr_data = { 
       action: 'reffering_status',   
       dataType: 'json', 
       prescription_id: prescription_id, 
       pat_ref_hosp : pat_ref_hosp 
      }; 

      console.log(curr_data); 
     )}; 

     return true; 
    }); 
}); 

您只需要運行後的DOM已經與更新，重視點擊監聽器的代碼新的信息。

請讓我知道這段代碼是否符合你的意圖。