0

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

在主页面上，所有日期选择器和输入掩码都正常工作，但 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>
4

1 回答 1

0

通过在 showContent() 中包含 jquery 来管理它的工作

<!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>
于 2017-08-09T02:46:50.630 回答