php - 当一个 html 加载到另一个 html 的 div 中时，document.ready jquery 不起作用

Question

我在另一个文档的 div 中加载一个带有关联 jquery 和 ajax 调用的 html 页面。但是，正在加载的html页面的$document.ready不起作用。

我使用以下语法在另一个 div 中加载 html 页面。

$('#LeaveReq').click(function(){
   $('#Showpages').load("leaveapp.html");
});

其中 Showpages 是一个空 div，定义为

<div id="Showpages" style = "float:left; width: 85%; background: white;">
<p> this is a placeholder
</div>

正在加载的页面如下

<script>

// standard functions for processing forms

function sendval(){
var thisform = document.getElementById("leaveapp");
var tosubmit = validateForm();

if(tosubmit){
   showprog();
   curruser = localStorage.getItem("username");
   curremail = localStorage.getItem("usermail")
   supmail = localStorage.getItem("supmail")

   // write json to submit the leaveform and update values in database
   var myData = [];
   myData.push({'EmpName' : curruser});
   for(var i=0; i<thisform.elements.length; i++)
   {
        myData.push({
        thisform.elements[i].name: thisform.elements[0].value
    });
   }
   myData.push({'UsrMail' : curremail});
   myData.push({'SupMail' : supmail});
   myData.push({'Status' : 'Submit'});

   var myjson = JSON.stringify(myData);

    $.ajax({
    method: "POST",
    url: "submitleave.php",
    data: {"points": myjson}
    })
    .done(function( msg ) {
        if(msg == "Success"){
            showcomp();
        else {
            alert("Could not sumbit - try again");
            window.open("index.html","_self");
        }
    });
} else
{
   alert("Please enter valid values before submitting the form");
}
}

function showprog(){
$('#forminput').hide();
$('#formsubmit').show();   
}

function showcomp(){
   $('#formsubmit').hide();
   $('#formsuccess').show();   
}

function onsuccess(retval){
   showcomp();
}

function validateForm(){
var $list = $("#leaveapp :input[type='text']");
var formstatus = true;
$list.each(function(){
    if($(this).val() == null | $(this).val() == ""){
        formstatus = false;
    }
})
return formstatus;
}

$('document').ready(function(){
   $('#formsubmit').hide();
   $('#formsuccess').hide();
   logged_user = localStorage.getItem("username");
});

</script>

<div id='forminput'>

<form id="leaveapp">

<label><?=logged_user?></label>
<p> Leave Type : <select name = "leavetype" id = "leavetype">
                 <option value="Annual Leave">Annual Leave</option>
                 <option value="Casual Leave">Casual Leave</option>
                 <option value="Sick Leave">Sick Leave</option>
                 <option value="Hajj Leave">Hajj Leave</option>
                 <option value="Unpaid Leave">Unpaid Leave</option>
                 </select> </p><br>
<p> Start Date : <input required readonly="true" type="text" name="StartDate" id="txtFromDate" /> </p><br>
<p> End Date :   <input required readonly="true" type="text" name="EndDate" id="txtToDate" /> </p><br>
<p> Contact Number : <input required pattern="[0-9()]{5,15}" type="text" name="Contactnum" id="contactnum" /> </p><br>
<p><input type="text" id = "Comments" name="Comments" value="Comments" /></p> <br>
<input type="submit" id="submit" value="Submit" onclick=sendval()>

</form>
</div>

<script>
$("#txtFromDate").datepicker({
        minDate: "-5D",
        maxDate: "+120D",
        numberOfMonths: 2,
        onSelect: function(selected) {
            $("#txtToDate").datepicker("option","minDate", selected)
        }
    });

</script>

<script>

$("#txtToDate").datepicker({ 
        minDate: 0,
        maxDate:"+180D",
        numberOfMonths: 2,
        onSelect: function(selected) {
            $("#txtFromDate").datepicker("option","maxDate", selected)
        }
    });

</script>

<script>

$('#leaveapp').on("keyup keypress", function(e) {
  var code = e.keyCode || e.which; 
  if (code  == 13) {               
    e.preventDefault();
    return false;
  }
});

</script>

<div id ='formsubmit'>
   <label> "Submission in progress - do not close the window </label>
</div>

<div id = "formsuccess">
<label> Form submitted successfully. Thank you </label>
</div>

加载的 html 函数没有任何 jquery 功能 - 即日期选择器不起作用等。

请你告诉我我犯了什么错误。

我加载了一个类似的页面，但它可以工作，但日期选择器或任何验证并不复杂。

问候，

Answer 1

加载 html 文件后 $(document).ready 未触发的原因是 $().load 函数执行异步请求。您的页面在完成页面渲染之前不会等待响应。在leaveapp 文件完成加载之前，ready 事件可能已经触发。您可以采取两件事来解决此问题:

<强>1。移动准备好的代码，直到加载请求中出现成功回调

$('#LeaveReq').click(function(){
   $('#Showpages').load("leaveapp.html", function() {
        $("#txtToDate").datepicker({ 
            minDate: 0,
            maxDate:"+180D",
            numberOfMonths: 2,
            onSelect: function(selected) {
                $("#txtFromDate").datepicker("option","maxDate", selected)
            }
        });

        $('#leaveapp').on("keyup keypress", function(e) {
          var code = e.keyCode || e.which; 
          if (code  == 13) {               
            e.preventDefault();
            return false;
          }
        });
   });
});

<强>2。使您的加载请求同步

您可以使用 $.ajax() 并指定 {async: false} 来获取 html 文件，而不是使用 .load 。这比第一个解决方案更慢且更笨重。