Question

我想以2输入形式显示日期选择器，当我点击确定按钮时，另外一个输入将被加载，但是这里我的datapicker不工作。当从ajax页面加载时，我的DatePicker不工作。这是我的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
      <script>
  $( function() {
    $( "#datepicker1" ).datepicker();
  } );
  </script>
<script>
var xyz;
function ShowAjax()
{
    xyz=new XMLHttpRequest();
    xyz.onreadystatechange=AjaxShow
    var url="AjaxPage.html";
    xyz.open("GET",url,true);
    xyz.send();
    function AjaxShow()
    {
        if(xyz.readyState==4 || xyz.readyState=="complete")
            {
            document.getElementById('Mylocation').innerHTML=xyz.responseText
            }
    }
}
</script>
</head>
<body>
<form>
<table> 
<tr> <td> <input type="text"  name="uname" id="datepicker"></td></tr>
<tr> <td id="Mylocation"></td></tr>
<tr> <td><input type="button"    value="OK"   onclick="ShowAjax();"/> </td></tr>
</table>
</form>
</body>
</html>

这是我的AjaxPage.html＆＃34;

<td><input type="text" name="test"  id="datepicker1"></td>

Answer 1

在你的ajax请求完成后调用你的日期选择器。

if(xyz.readyState==4 || xyz.readyState=="complete){ 
    document.getElementById('Mylocation').innerHTML=xyz.responseText;
    $( "#datepicker1" ).datepicker();
 }

Answer 2

/events找到该元素并将其转换为日期选择器。在文档准备就绪时运行该代码。

稍后，您点击该按钮，然后将包含$( "#datepicker1" ).datepicker();的元素添加到页面。

运行id=datepicker1之后。

您需要移动它，以便在元素存在时运行。

即。在$( "#datepicker1" ).datepicker();之后。

Answer 3

你可以像这样使用jQuery：

function ShowAjax() {
    $.get( "AjaxPage.html", function( data ) {
        $( "#Mylocation" ).html( data );
    });
}

或：

function ShowAjax() {
    $.get( "AjaxPage.html", function( data ) {
        $( "#Mylocation" ).html( data );
        $( "#datepicker" ).datepicker();
        $( "#datepicker1" ).datepicker();
    });
}

Javascript无法在Ajax页面中运行

3 个答案: