在ajax调用中加载datepicker,然后onclick不起作用

时间:2013-10-07 18:07:14

标签: javascript jquery ajax datepicker

我正在一个ajax调用中加载我的datepicker脚本,它可以正常工作并加载datepicker。我遇到的问题是,当我点击一天时它不会触发onclick功能。

如果我在一个单独的窗口中单独加载datepicker页面,那么它可以正常工作

AJAX CALL

function dates(str2){

  var event = findSelection("event");
  if (str2 == "")
  {
    document.getElementById("dates").innerHTML = "";
    return;
  }
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function()
  {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
      document.getElementById("dates").innerHTML = xmlhttp.responseText;
      $("#datepicker").datepicker();
    }
  }


  xmlhttp.open("GET", "dates.php?event=" + 
    event + "&type=" + document.getElementById("type").value, true);

  xmlhttp.send();

}

dates.php

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Display inline</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function () {
      $('#datepicker').datepicker({
          dateFormat: 'dd-mm-yy',
          numberOfMonths: 1,
          onSelect: function (selected, evnt) {
              alert("I am an alert box!");
          }
      });
  });      </script>
</head>
<body>

Date: <div id="datepicker"></div>


</body>
</html>

1 个答案:

答案 0 :(得分:0)

也许是这样的

dates.php(删除除此之外的所有内容)

Date: <div id="datepicker"></div>

然后你的js代码(将redystate更改函数更改为):

  xmlhttp.onreadystatechange = function()
  {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
      document.getElementById("dates").innerHTML = xmlhttp.responseText;
      $('#datepicker').datepicker({
          dateFormat: 'dd-mm-yy',
          numberOfMonths: 1,
          onSelect: function (selected, evnt) {
              alert("I am an alert box!");
          }
      });
    }
  }

或者,因为你使用jQuery无论如何都要将日期功能更改为

function dates(str2){
  var event = findSelection("event");
  $("#dates").load("dates.php?event=" + 
    escape(event) + "&type=" + escape($("#type").val()));
  $('#datepicker').datepicker({
     dateFormat: 'dd-mm-yy',
     numberOfMonths: 1,
     onSelect: function (selected, evnt) {
        alert("I am an alert box!");
     }
 });
}