Datepicker，从服务器获取请求后，数据掩码将无法加载

问题描述：

我创建了具有2个日期选择器和1个时间输入掩码的主页面。一个按钮将触发一个GET请求，以在一个div中加载一个具有相同内容的页面。我已经把所有的js，CSS和函数脚本放在主页面上。Datepicker，从服务器获取请求后，数据掩码将无法加载

在主页面上，所有的日期选取器和输入掩码都能正常工作，但GET请求已触发并且新页面已加载，所有日期选取器和输入掩码都不起作用。

请帮忙。

主页代码

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<!-- IN SUBFOLDER PLUGIN --> 

<!-- Date Picker --> 
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css"> 
<!-- JQuery 2.2.3 Compressed --> 
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> 
<!-- Bootstrap 3.3.6 --> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<!-- datepicker --> 
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> 
<!-- InputMask --> 
<script src="plugins/input-mask/jquery.inputmask.js"></script> 
<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script> 
<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script> 
</head> 
<body> 
<form name="form1"> 
    <label>Date : </label> 
     <div>From :<input name="dt_DateFr" type="text" date-picker></div> 
     <div>To : <input name="dt_DateTo" type="text" date-picker></div> 
     <div>Time: <input id="txtOTOut" name="txtOTOut" type="text" 
      data-inputmask="'alias': 'hh:mm'" data-mask> 
     </div> 
     <button type="submit" id="btnShow" name="btnShow" 
      onclick="showContent();return false;"> 
      Show</button> 
</form> 
<br /> 
<br /> 
<div id="content2" style="display: none"> 
    <!-- CONTENT HERE --> 
</div> 

<script> 
$(function() { 
//Date picker 
$("[date-picker]").datepicker({ 
    format: "dd/mm/yyyy", 
    autoclose: true, 
    }).datepicker("setDate", new Date()); 
}); 

$(function() { 
//Time mask 
    $("[data-mask]").inputmask(); 
}); 

$(function() { 
    $("#btnShow").click(function() { 
     $("#content2").show(); 
    }); 
}); 
</script> 

<script> 
function showContent() { 
    var xhttp; 

    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("content2").innerHTML = xhttp.responseText; 
     } 
    }; 

    xhttp.open("GET", "ax_test.asp?", true); 
    xhttp.send(); 
} 
</script>

GET请求页面ax_test.asp

<form name="form2"> 
    <label>Date : </label> 
     <div>From :<input name="dt_DateFr" type="text" date-picker></div> 
     <div>To : <input name="dt_DateTo" type="text" date-picker></div> 
     <div>Time: <input id="txtOTOut" name="txtOTOut" type="text" 
      data-inputmask="'alias': 'hh:mm'" data-mask> 
     </div> 

</form>

NETWORK选项卡下的控制台中显示的任何内容？ –

答

设法得到它通过在jQuery的工作showContent（）

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<!-- ALL script in subfolder plugins --> 

<!-- Date Picker --> 
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css"> 
<!-- JQuery 2.2.3 Compressed --> 
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> 
<!-- Bootstrap 3.3.6 --> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<!-- datepicker --> 
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> 
<!-- InputMask --> 
<script src="plugins/input-mask/jquery.inputmask.js"></script> 
<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script> 
<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script> 
</head> 
<body> 
<form name="form1"> 
    <label>Date : </label> 
     <div>From :<input name="dt_DateFr" type="text" date-picker></div> 
     <div>To : <input name="dt_DateTo" type="text" date-picker></div> 
     <div>Time: <input id="txtOTOut" name="txtOTOut" type="text" 
      data-inputmask="'alias': 'hh:mm'" data-mask> 
     </div> 
     <button type="submit" id="btnShow" name="btnShow" 
      onclick="showContent();return false;"> 
      Show</button> 
</form> 
<br /> 
<br /> 


<div id="content2" style="display: none"> 
    <!-- CONTENT HERE --> 
</div> 

<script> 
$(function() { 
//Date picker 
$("[date-picker]").datepicker({ 
    format: "dd/mm/yyyy", 
    autoclose: true, 
    }).datepicker("setDate", new Date()); 
}); 

$(function() { 
//Time mask 
    $("[data-mask]").inputmask(); 
}); 

$(function() { 
    $("#btnShow").click(function() { 
     $("#content2").show(); 
    }); 
}); 
</script> 

<script> 
function showContent() { 
    var xhttp; 

    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("content2").innerHTML = xhttp.responseText; 
     $("[data-mask]").inputmask(); 
     $("[date-picker]").datepicker({ 
     format: "dd/mm/yyyy", 
     autoclose: true, 
     }).datepicker("setDate", new Date()); 


     } 
    }; 

    xhttp.open("GET", "ax_test.asp?", true); 
    xhttp.send(); 
} 
</script> 

</body> 
</html>

Datepicker，从服务器获取请求后，数据掩码将无法加载

相关推荐