Datepicker jquery ui在主视图的一部分中不起作用

Question

我的日期时间选择器出了问题。

我在view.htm处有JavaScript代码，用于加载view_part.htm作为搜索结果。

在view_part.htm，我使用jQuery UI创建日期时间选择器，但它没有显示。我在view.htm编写了jQuery代码，但它仍然不起作用。

这是我的代码：

for(i=0;i<sum;i++){
    $("#TGL_APPROVE_"+i).datepicker();
    $("#TGL_APPROVE_"+i).datepicker( "option", "dateFormat", "yy-mm-dd" );
}

这是我的观点：

  

Answer 1

问题看起来是因为你在view_part.html的内容实际进入DOM之前绑定了datepicker。

你需要做的是在 加载后（通过AJAX）将其绑定并插入到DOM中。

---

<强>更新

$("#cont_list").load('<?=HOME?><?=APPID?>/cont_list?no_req={$row_request.NO_REQU‌​‌​EST} #list', function(data) {

   // bind datepicker here. 
   // Ensure 'sum' has a value before doing so.
   for(var i=0;i<sum;i++){
      $("#TGL_APPROVE_"+i).datepicker();
      $("#TGL_APPROVE_"+i).datepicker( "option", "dateFormat", "yy-mm-dd" );
   }
}); 

更好的是，如果你可以为你想要绑定datepicker的所有元素提供一个类，那么它会更容易。例如，如果您为这些元素指定class="attachdp"，则将for循环替换为：

$(".attachdp').datepicker({ dateFormat: "yy-mm-dd" });

Answer 2

尝试使用FireFox的Firebug插件查看任何javascript错误。

但是要解决您的问题，如果您给这些输入一个类。让我们说＆＃34; hasDatePicker＆＃34;。

然后在您通过AJAX加载内容后（或者您使用的是iFrame？）

$(".hasDatePicker").datepicker( "option", "dateFormat", "yy-mm-dd");

Answer 3

将类添加到应支持datapicker插件的所有字段。你将能够以更简单的方式做到这一点：

$(function() {
   $(".datapicker").datepicker();
 }

这是document.ready（）的快捷方式，所以当加载整个页面时，会有绑定数据贴图

Answer 4

你是如何调用view_part.htm的？我是用AJAX假设的？

如果是 - 你应该在ajax回调中或者view_part.htm已经完全加载时调用datepicker（）。 例如在view_part中：

<script>
$(function(){
for(i=0;i<sum;i++){
    $("#TGL_APPROVE_"+i).datepicker();
    $("#TGL_APPROVE_"+i).datepicker( "option", "dateFormat", "yy-mm-dd" );
}
});
</script>

Answer 5

我不知道你的变量是什么i＆amp; sum在这里引用，但根据您评论中的代码，您需要执行以下操作：

$("#cont_list").load('<?=HOME?><?=APPID?>/cont_list?no_req={$row_request.NO_REQU‌​EST} #list', function(data) { 
    for(i=0;i<sum;i++){
        $("#TGL_APPROVE_"+i).datepicker( "option", "dateFormat", "yy-mm-dd" );
    }
});

此处的回调可确保 datepicker 在添加到DOM时绑定到您的元素。