Jquery ui fancybox中的jqueryUI日期选择器不工作

我有一个奇怪的问题。当我将带有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();
    }
});

Lorem ipsum dolor sit amet，是一位杰出的献身者。密苏里州奎斯克·布兰迪特

$（“.datepicker”）.datepicker（）；
$（“.fancybox”）.fancybox({
openEffect:'无'，
closeEffect:'无'，
后加载：函数（）{
this.inner.prepend（'1.My custom title'）；
this.content='2.My自定义标题'+this.content.html（）；
}
});

看小提琴上的这个

---

提前感谢；-）

这一行混淆了jquery ui，因为您正在复制html

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

---

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

第一:

---

嗨，谢谢你的帮助。你的解决方案奏效了，我最终找到了另外两个解决我问题的方法。我也把它们贴在这里了。

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

$(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();
    }
});

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

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