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

问题描述

一些问题解决后，我有一个棘手的东西。我正在使用一个用于JQuery的覆盖插件，名为prettyPhoto。

只需要使用表单进行覆盖。该表单被CSS隐藏，当链接被点击时，重叠显示它是一个很好的方式。

到目前为止，一切都按预期工作，除了一件事：此表单有一个日期字段，其中我使用datepicker UI。

它（datepicker）根本没有显示。起初，我尝试了谷歌搜索，并做了一些CSS调整...没有任何作用。 CSS， z-index 动态的 z-index

然后我用Firebug保持眼睛。 Datepicker通常在动态地单击监听器元素时设置其属性。在这个表单里面的叠加层，当我点击监听器字段，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，因此在lightbox中的DOM元素上不存在datepicker被绑定的焦点事件。

这是一个有同样问题的人：

你可能需要这样的东西：

  $（'＃overlayData'）。live ick'，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屋！