无法为动态加载的输入框加载日期选择器和小部件

Cannot load datepicker and widget for a dynamically loaded input box

本文关键字：加载 选择器 日期 小部 输入 动态      更新时间：2024-02-01

这是html部分

<html>
<head>
<script src="./js/ajax.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="./css/jquery-ui-timepicker-addon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">      
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js">
</script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<script>
$('#datepicker').datetimepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false },
timeFormat: "hh:mm tt"
});
</script>
</head>
<div id="content">
</div>
</html>

javascript ajax文件如下

function get_content(n)
{
//Create XMLHttpRequest Object
var hr=new XMLHttpRequest();
var url="./request_forward.php";
var vars="id="+n;
hr.open("POST",url,true);
//Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//Access the onreadystatechange event for the XMLHttpRequest Object
hr.onreadystatechange=function()
{
    if(hr.readyState==4 && hr.status==200)
    {
        var return_data=hr.responseText;
        document.getElementById("content").innerHTML=return_data;
        CKEDITOR.replace( 'txt1' );
    }
}
hr.send(vars);
document.getElementById("content").innerHTML='<div style="width:300px;height:100px; margin:0 auto;margin-top:10%"><img style="width:300px;height:100px;"     src="./img/loading.gif"></div>';
}

这是动态加载到div#content 中的内容

<form id="add_program" method="post" name="add_program" enctype="multipart/form-data">
<label for="program_name">Program Name: </label>
<textarea  id="program_name" name="program_name" rows="3" cols="100" required>      </textarea>

<label for="from">From Date &#38; Time: </label>
<input type="text" id="datepicker" name="from">
<label for="description">Description: </label>
<textarea class="ckeditor"  id="txt1" name="description"></textarea>
<br/>

<label for="image">Upload Image: </label>
<input name="image" id="image" type="file"/><span class="notes">(allowed image types: gif, jpeg, jpg, png)</span>
<div style="width:10%; margin:0 auto; margin-top:10px"><input type="submit" name="add_program" value="Add Program" class="button"></div>
</form>

日期选择器不是为输入文本框"datepicker"而来的。我还不认识jquery。动态加载输入框后，如何初始化日期选择器？？

将日期选择器添加到页面后，将其绑定到输入

if(hr.readyState==4 && hr.status==200)
{
    var return_data=hr.responseText;
    document.getElementById("content").innerHTML=return_data;
    CKEDITOR.replace( 'txt1' );
    $('#datepicker').datepicker();
}

这是与javascript相关的基本困难之一——代码在运行时运行，事件侦听器仅绑定到脚本当前可访问的DOM元素。因此，基本上，当您运行$（"#datepicker"）.datepicker（）时；函数，jQuery不知道"#datepicker"是什么！

您需要做的是运行$（"#datepicker"）.datepicker（）；函数。好消息是，你已经有一个条件语句在等待它的发生。

所以。。。

if(hr.readyState==4 && hr.status==200) {
    var return_data=hr.responseText;
    document.getElementById("content").innerHTML=return_data;
    CKEDITOR.replace( 'txt1' );
    // run jquery ui datepicker on newly generated "#datepicker"
    $('#datepicker').datepicker();
}

希望能有所帮助！

相关文章：