javascript - 使用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 为空 我不知道如何在jsfiddle中显示ajax 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 已使用新信息更新后运行附加点击监听器的代码即可。

请告诉我此代码是否达到了您的预期目的。