jqueryUI datepicker in fancybox does not work - jquery-ui

Question

I have this strange problem. When I put an input with datepicker class into a fyncybox wrap, datepicker does not show up when I click on that input.
Open
<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();
}
});
See this example on fiddle.
Thanks in advance ;-)

Answer 1

Hi I have eventually found these two solutions:
FIRST:
fiddle of first solution here
$(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:
fiddle of second solution here
$(".datepicker").datepicker();
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});

Answer 2

This line is confusing jquery ui, because your are copying the html.
this.content = '<h1>2. My custom title</h1>' + this.content.html();
You can see this happening when removing the display: none. Try add html to the original div, this will work fine:
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
afterLoad : function() {
$("#test").prepend( '<h1>1. My custom title</h1>' );
$("#test").prepend('<h1>2. My custom title</h1>');
}
});