2

私はこの奇妙な問題を抱えています。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();
    }
});

フィドルでこの例を参照してください。

前もって感謝します ;-）

4

2 に答える 2

3

こんにちは、最終的にこれら2つの解決策を見つけました：

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: ここで 2 番目のソリューションのフィドル

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

$(".fancybox").fancybox({
   openEffect  : 'none',
   closeEffect : 'none'
});
于 2013-09-04T08:37:18.727 に答える
0

この行は、html をコピーしているため、jquery ui を混乱させます。

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

を削除すると、これが発生することがわかりますdisplay: none。元の div に 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>');
    }
});
于 2013-09-02T14:28:54.637 に答える