jquery-ui - Fantasybox中的jqueryUI datepicker不起作用

Question

我有这个奇怪的问题。当我将带有 datepicker 类的输入放入 fyncybox 包装中时，单击该输入时不会显示 datepicker。

<a href="#test" class="fancybox">Open</a>
<div id="test" style="display:none;width:300px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit, mi sed
</p>
<input type="text" class="datepicker"/>
</div>

$(".datepicker").datepicker();

$(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    afterLoad   : function() {
        this.inner.prepend( '<h1>1. My custom title</h1>' );
        this.content = '<h1>2. My custom title</h1>' + this.content.html();
    }
});

请参阅小提琴上的这个例子。

提前致谢 ;-）

Answer 1

嗨，我最终找到了这两个解决方案：

FIRST： 这里是第一个解决方案的小提琴

$(document).on('click', '.datepicker', function(){ 
    if (!$(this).hasClass('hasDatepicker')) { 
        $(this).datepicker(); $(this).datepicker('show'); 
    }
}); 

$(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    afterLoad   : function() {
       this.inner.prepend( '<h1>1. My custom title</h1>' );
       this.content = '<h1>2. My custom title</h1>'+ this.content.html();
    }
});

SECOND： 第二个解决方案的小提琴在这里

$(".datepicker").datepicker();

$(".fancybox").fancybox({
   openEffect  : 'none',
   closeEffect : 'none'
});

Answer 2

这一行让 jquery ui 感到困惑，因为您正在复制 html。

 this.content = '<h1>2. My custom title</h1>' + this.content.html();

您可以在删除display: none. 尝试将 html 添加到原始 div 中，这将正常工作：

$(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    afterLoad   : function() {
        $("#test").prepend( '<h1>1. My custom title</h1>' );
        $("#test").prepend('<h1>2. My custom title</h1>');
    }
});