DatePicker 不适用于 Ajax 加载的内容答案

【问题标题】：DatePicker Not working On Ajax Loaded ContentDatePicker 不适用于 Ajax 加载的内容
【发布时间】：2013-05-27 12:06:56
【问题描述】：

我一直在解决这个问题。日期选择器在静态内容上运行良好。

但是通过 Ajax 加载内容时失败。

我试过了：-

jQuery.noConflict();
jQuery(function($) {
    $(document).ready(function(){
        $( ".datepickerRange" ).datepicker({
            dateFormat: 'dd-mm-yy',
            prevText:'',
            nextText:'',
            minDate: 0,
            maxDate: "+1M",
            showOn: "button",
            buttonImage: divadatepicker.image_url+"/calendar.jpeg",
            buttonImageOnly: true
        });
        $( ".datepicker" ).datepicker({
            dateFormat: 'dd-mm-yy',
            prevText:'',
            nextText:'',
            showOn: "button",
            buttonImage: divadatepicker.image_url+"/calendar.jpeg",
            buttonImageOnly: true,
            changeMonth: true,
            changeYear: true,
            yearRange: "1960:2015"
        });

            });

$(document).live(function(){
        $( ".datepickerRange" ).datepicker({
            dateFormat: 'dd-mm-yy',
            prevText:'',
            nextText:'',
            minDate: 0,
            maxDate: "+1M",
            showOn: "button",
            buttonImage: divadatepicker.image_url+"/calendar.jpeg",
            buttonImageOnly: true
        });
        $( ".datepicker" ).datepicker({
            dateFormat: 'dd-mm-yy',
            prevText:'',
            nextText:'',
            showOn: "button",
            buttonImage: divadatepicker.image_url+"/calendar.jpeg",
            buttonImageOnly: true,
            changeMonth: true,
            changeYear: true,
            yearRange: "1960:2015"
        });

            });

});

通过ajax加载内容后，它不显示偶数日历小图像。

【问题讨论】：

仅供参考，$.live() 自 1.7 起已弃用，并已在 1.9 中删除。使用$.on() 而不是api.jquery.com/on

标签： jquery-ui jquery-ui-datepicker

【解决方案1】：

在您的 ajax 调用的 success 回调函数中调用 .datepicker，而不是使用已弃用的 .live。示例：

function initdatepicker(){
    $( ".datepickerRange" ).datepicker({
        dateFormat: 'dd-mm-yy',
        prevText:'',
        nextText:'',
        minDate: 0,
        maxDate: "+1M",
        showOn: "button",
        buttonImage: divadatepicker.image_url+"/calendar.jpeg",
        buttonImageOnly: true
    });
    $( ".datepicker" ).datepicker({
        dateFormat: 'dd-mm-yy',
        prevText:'',
        nextText:'',
        showOn: "button",
        buttonImage: divadatepicker.image_url+"/calendar.jpeg",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        yearRange: "1960:2015"
    });
}
$(document).ready(function(){
    initdatepicker();
});

并将其添加到您的$.ajax success：

initdatepicker();

【讨论】：

像这样：success: function(html) { // jQuery("#search_result").slideDown("slow"); // 警报(html); jQuery("#right_search").html(html); jQuery('#TB_overlay').css('display','none'); jQuery("body").css("overflow","auto"); $( ".datepicker" ).datepicker(); }，它不工作。
我在帖子中添加了一个示例。删除$( ".datepicker" ).datepicker(); 并改用initdatepicker();。
感谢您的帮助.. 但它仍然无法正常工作。但是，该函数在成功时被调用，我在那里测试警报。但是什么也没发生 :(
从ajax加载的内容是否还有datepicker或datepcikerRange类？
它有以下类：- select_reseve reserve_date datepickerRange field1

【解决方案2】：

使用这个

<script type="text/javascript">
    $(function(){
        $('input.calendarSelectDate').live('click', function() {
           $(this).datepicker({showOn:'focus'}).focus();
        });
     });
</script>

【讨论】：