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

您使用$('document').ready(function(){的单引号，因此无法按预期工作。尝试删除单引号代码

$(document).ready(function(){
      // your code here
});

Answer 2

加载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。使您的加载请求同步

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

Answer 3

$(document).ready是一个事件，当document对象准备就绪并且在它不再触发之后触发，即使页面内容发生变化。

您应该使用ajax调用的success属性手动重新绑定所有事件处理程序，或使用事件委派更好地重新绑定。

当一个html加载到另一个html中时，document.ready jquery无法正常工作

3 个答案: