jquery ui日历重置更改元素属性

Question

我有一个设置，我使用Jquery UI日历和Qtip来显示与每个月的每一天相关的文本。

我initate UI组件是这样的：

$('#datepicker').datepicker({     
     dateFormat: 'dd/mm/yy', 
     beforeShowDay: highlightDays, 
     showOtherMonths: true, 
     numberOfMonths: 2 
    }); 

并在此之后我开始qtips：

$('#datepicker').find("td").each(function(){ 
     $(this).qtip({  
      content: { text: tips[$(this).attr('title')] }, 
      show: { solo: true },  
      hide: 'unfocus' 
     }); 
    }) 

我一直需要显示该阵列称为“提示”中的信息我从数据库中填充。问题是，无论何时我改变月份或点击日期，qtip都不会再显示。

我尝试这种解决方法，但它不工作：

$('#datepicker').datepicker({     
     dateFormat: 'dd/mm/yy', 
     beforeShowDay: highlightDays, 
     showOtherMonths: true, 
     numberOfMonths: 2, 
     onChangeMonthYear: function(year, month, inst){ 
      $('#datepicker').find("td").each(function(){ 
       $(this).qtip({  
        content: { text: tips[$(this).attr('title')] }, 
        show: { solo: true },  
        hide: 'unfocus' 
       }); 
      }) 
     } 
    }); 

我如何能保持qtips甚至焕一天要素用户点击任何想法和月变化？

更新＃1

这里是复制问题小提琴http://jsfiddle.net/ZKtAZ/3/（更新小提琴）

更新＃2

试图 “上” 为EmirCalabuch建议，但仍对一个月改变它不起作用http://jsfiddle.net/ZKtAZ/9/。

我可能会说一些愚蠢的事情，但是当日历更改月份时，它实际上是重置了整个datepicker，这可能是它不工作的原因。

更新＃3

我找到了解决这个，你可以在这里找到http://jsfiddle.net/ZKtAZ/11/。

其实我不得不将点击事件绑定到日期选择器，以便它将在月份更改上设置适当的操作。

用了一天的问题卡嗒一声被initating拣货机在使用这段代码解决：使用这里这个答案

onSelect: function (date, inst) { 
     inst.inline = false; 
    } 

，可知该溶液https://stackoverflow.com/a/2312825/1168944

感谢youu所有的时间和贡献。

Answer 1

jQuery UI datepicker具有（至少最新版本）内部工具提示支持，所以你不需要添加qtip。要将工具提示文本应用于特定日期，请在beforeShowDay函数中返回三元素数组（您当前返回两个）。第三个元素是当日期悬停时要显示的工具提示文本，如果有的话。

我已经发布了小提琴这里显示了它会是什么样子：http://jsfiddle.net/CFMru/

关于您的问题，实际上是创建日期选择器的表之前的onChangeMonthYear()方法被调用，所以你可以对未设置qtip。如果你仍然想使用qtip作为你的工具提示，我认为最好的办法是使用live()或on()来拦截悬停事件，检查你是否需要在当前日期显示工具提示，然后静态显示工具提示。

$('#datepicker tbody td').on('mouseenter', function() { 
    // Reconstruct the hovered date 
    var closest_datepicker = $(this).closest('div.ui-datepicker-group'); 
    var month = closest_datepicker.find('span.ui-datepicker-month').text(); 
    var year = closest_datepicker.find('span.ui-datepicker-year').text(); 
    var day = $(this).text(); 

    // Look for the date in the array 

    // Show the tooltip 
    $(this).qtip({show: {ready: true}, hide: {fixed : true}, content: 'Your content' }); 
} 

// Attach a mouseleave event as well to hide the tooltip 
$('#datepicker tbody td').on('mouseleave', function() { 
    // Destroy the tooltip, it will be recreated when hovered again 
    $(this).qtip("destroy"); 
}