日期选择器在颜色框内不起作用答案

【问题标题】：Datepicker won't function inside colorbox日期选择器在颜色框内不起作用
【发布时间】：2011-04-09 18:51:04
【问题描述】：

这里的场景：
我想在表单的输入字段上应用日期选择器。
单击链接时，将打开一个包含表单的颜色框。

不知何故日期选择器不起作用，所以我搜索了互联网。
我对这篇 datepicker inside a thickbox 的帖子感到困惑，其中发表了以下声明： JavaScript/jQuery 在 ColorBox 中不起作用。
这让我很困惑，因为其他人似乎已经解决了。

我将展示颜色框调用的代码：

        <script type="text/javascript">
        $(document).ready(function() {
                $(".customer").colorbox(
                {
                  transition:'fade',
                    width:'750',
                    speed:'500',
                    height:'400',
                    iframe:true
                });
        });
        </script>

尽管我的错误控制台显示第一个 } 后缺少 }，但颜色框已成功打开）；发生。

日期选择器的代码：

<script type="text/javascript">$(document).ready(function() {
    $('.datepick').datepicker({
    changeYear:true,
    yearRange:'c-65:c+0',
    changeMonth:true
    });
    $('.datepick').datepicker($.datepicker.regional['nl']);});</script>

此代码在我的网站上的其他地方确实有效，但它不位于颜色框中。

我尝试过的：

我尝试为 datepick 类指定 10000 或更高的 z-index，因为默认情况下 colorbox 的 z-index 为 9999。
我在彩盒上尝试了 oncomplete function()，但在应用时无法使彩盒工作。
我尝试结合前两个选项将 iframe 设置为 false。

我的问题：

是否可以在颜色框中使用日期选择器？
我关于颜色框的代码是否正确？
如何解决？！

更新
解决方案：我犯了一个愚蠢的错误：P...
然而，我在第一个问题上找到了答案，这可能具有一定的价值。

是的，可以在不使用 onComplete:function() 的情况下让日期选择器在颜色框中工作。

【问题讨论】：

标签： php jquery colorbox uidatepicker

【解决方案1】：

您加载的 iframe 是否包含 datepicker 实例化代码？

我的假设是这样的：

您有一个带有class="customer" 的锚点
此锚点有一个 href，它指向您要在颜色框中显示的页面
此页面在 iframe 中加载（由于 iframe:true）
并且此页面没有您的日期选择器实例化代码

最简单的做法是将日期选择器代码移动到customer页面的onready函数中。

【讨论】：

datepicker 函数位于加载的页面中。打开颜色框的锚点是：add customer。如果我理解正确，我已经按照你的建议做了。如果我没有，请纠正我。
那么，当您直接访问customer.php 时会发生什么？日期选择器有效吗？如果没有，您看到了什么错误？
非常感谢您的提示！ :) 在要加载日期选择器之前，我注意到页面中有一个错误。这解决了问题！

【解决方案2】：

如ColorBox documentation中所述：

这通常是由于在元素加载到文档之前尝试访问元素，可以通过将 JavaScript 移动到 ColorBox 的 onComplete 回调来解决。

示例（使用 jQuery Forms 插件）：

$('#login_window').colorbox({
    ...
    onComplete:function(){
        $('form#login').ajaxForm();
}});

您可以调整示例以加载日期选择器。

【讨论】：

正如我所说，我尝试了 onComplete:function()。和 $(document).ready(function()) 不一样吗？让我在颜色框中的日期选择器现在可以在没有 onComplete:function() 的情况下工作。无论如何感谢您的帮助:)。

【解决方案3】：

我遇到了同样的问题。我使用 id 作为选择器，但 colorbox 复制了整个 html 内容和 id。所以如果我使用 $('#myid').doSomething() 我得到一个错误，因为“myid”被重复了。这就是问题所在。

使用更好的选择器，例如 $('#colorbox .myidasclass').doSomething() 来解决问题。同样的问题是没有“#colorbox”作为附加选择器的类选择器。

【讨论】：