我有一个日期选择器的问题,由于某种原因在第一次加载datepicker工作正常,让我选择日期,但当我点击刷新(通过ajax),datepicker区域刷新,但后来我无法使用datepicker。无论如何,他们是围绕着吗?
我尝试使用不同的id并删除旧元素并没有太大的成功:/
我在php中有一个显示日期的函数,在'datefunction.php'文件中
function getDateInfo()
{
$date = $_GET['date'];
$html = '<script>
$(document).load(function() {
$("#dt").datepicker(\'destroy\');
$("#dt").remove();
var mydate = $("#dt1").datepicker({ dateFormat: "dd-mm-yy" });
$("#dt1").click(function(){
mydate.datepicker("show");
});
});
});</script>
<label>Date1:</label>
<input type="text" name="dt" id="dt1" maxlength="10" size="12" value="' . $date . '" readonly="true" />';
return $html;
}
echo getDateInfo();
我的网页被称为'dates.php'
<script src="/script/jquery.js" type="text/javascript"></script>
<script type='text/javascript' src='/script/jquery-ui-1.8.9.custom.min.js'></script>
<script type='text/javascript' src='/script/jquery.datePicker.js'></script>
<script>
var bustcachevar=1; //bust potential caching of external pages after initial request? (1=yes, 0=no)
var bustcacheparameter="";
function ajaxpage(url, containerid, requesttype){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
} else return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (requesttype=='get'){
if (bustcachevar) bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
} else if (requesttype=='post') {
var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) + "&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );
page_request.open('POST', url, true);
page_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
page_request.setRequestHeader("Content-length", parameters.length);
page_request.setRequestHeader("Connection", "close");
page_request.send(parameters);
};
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
$(document).ready(function() {
var mydate = $("#dt").datepicker({ dateFormat: "dd-mm-yy" });
$("#dt").click(function(){
mydate.datepicker("show");
});
});
</script>
<?php
$date = "05-06-2009";
echo "<div id='datearea'><label>Date:</label>
<input type='text' name='dt' id='dt' maxlength='10' size='12' value='" . $date . "' readonly='true' /></div>";
echo "<a href='#' onclick='javascript:ajaxpage(\"datefunction.php?date=02-04-1999\", \"datearea\", \"get\");'>update</a>";
?>
答案 0 :(得分:0)
你应该解决这个问题,改变这个:
$("#dt").click(function(){
到此:
$("#dt").on('click', function(){
答案 1 :(得分:0)
因为datepicker()将无法找到动态添加的元素...要么在ajax成功函数之后调用datepicker
$('#yourInoutID').datepicker();
OR
这样做
$(document).find('#yourInoutID').datepicker();
<强>更新强>
在你的情况下
$(document).on('click','#dt',function(){
mydate.datepicker("show");
});
});
答案 2 :(得分:0)
这是因为,当页面加载时, JQuery * 添加 *所有事件和DOM元素的功能,但是当通过Ajax加载 DOM的元素时,永远不会添加事件。为了实现这一点,我使用了JQuery的 LiveQuery 插件,即使在已经通过AJAX或任何东西加载DOM之后添加事件,也会将事件添加到DOM。
$("#dt").livequery('click', function(event) {
//CODE FOR DATE PICKER
});