Jquery datepicker 在灯箱内不起作用 [英] Jquery datepicker does not work inside lightbox

问题描述

解决了一些问题后，我得到了一个棘手的东西.我正在为 JQuery 使用一个名为 prettyPhoto 的覆盖插件.

只是想用表格做一个覆盖.表单用 CSS 隐藏，当点击链接时，覆盖层以漂亮的方式显示它.

到目前为止一切都很好，一切都按预期工作，除了一件事:这个表单有一个日期字段，我在其中使用了日期选择器 UI.

它(日期选择器)根本没有出现.起初，我尝试使用谷歌搜索并进行一些 CSS 调整......没有任何效果.z-index 在 CSS 上，z-index 动态...

然后我用 Firebug 来关注.Datepicker 通常仅在单击侦听器元素时动态设置其属性.在叠加层内的这个表单上，当我单击侦听器字段时，日期选择器 div 根本没有变化.

有关如何使其工作的任何想法?

参考资料:网站是:http://davedev.com.br/projects/jdc/v1/pt/reserva.php是的，它是葡萄牙语.只需点击屏幕右下角的卡通对话框即可查看叠加层.

我正在将 google apis CDN 用于 jquery 和 jquery-ui.

我正在 Ubuntu、Firefox 3.6.7(Chrome 5 和 Opera 10.60)上进行开发和测试.

是的，我使用了一些 HTML5 元素和一些 CSS3 效果(卡通对话框气球完全是用 CSS3 制作的.没有图像.=]).

解决方案

你的覆盖插件 'prettyPhoto' 每次被触发时都会创建一个新的 DOM，所以 datepicker 绑定到的 'focus' 事件在 DOM 上不存在灯箱中的元素.

这里有一位遇到同样问题的人:

jQuery live() 使用 jQuery UI datepicker 失败

你可能需要这样的东西:

$('#overlayData').live('click', function (){$(this).datepicker({dateFormat: 'dd/mm/yy'});});

After some problems solved, I got a tricky stuff. I am using an overlay plugin for JQuery called prettyPhoto.

Just wanna make an overlay with a form. The form is hidden with CSS, and when a link is clicked, the overlay shows it in a nice fashion.

So far so good, everything working as expected, except only one thing: this form has a date field, in which I use datepicker UI.

It (the datepicker) does no shows up at all. At first, I tryed googling and making some CSS adjustments... nothing works. z-index on CSS, z-index dynamically...

Then I used Firebug to keep an eye. Datepicker usually sets its properties just when the listener element is clicked, dynamically. On this form inside the overlay, when I click the listener field, the datepicker div does not change at all.

Any ideas on how get this working?

References: site is: http://davedev.com.br/projects/jdc/v1/pt/reserva.php Yes, it is in portuguese. Just click the cartoon dialog box on bottom right side of screen to see the overlay.

I am using google apis CDN for jquery and jquery-ui.

I am developing and testing upon Ubuntu, Firefox 3.6.7 (Chrome 5 and Opera 10.60).

And yes, I am using some HTML5 elements and some CSS3 effects (the cartoon dialog baloon is fully made with CSS3. No images. =]).

解决方案

Your overlay plugin 'prettyPhoto' create a new DOM everytime it is triggered, so the 'focus' event that datepicker is bounded to, does not exist on the DOM element in your lightbox.

Here is one person who had the same problem:

jQuery live() failing with jQuery UI datepicker

You'll probably need something like this:

$('#overlayData').live('click', function (){
  $(this).datepicker({dateFormat: 'dd/mm/yy'});
});

这篇关于Jquery datepicker 在灯箱内不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！