javascript - 鼠标悬停时使用 Fullcalendar Qtip 而不是 eventRender

Question

我在将 Qtip 附加到 eventMousever 事件而不是 fullcalendar 中的 eventRender 事件时遇到问题。

我想要这样做的原因是因为拥有数据的服务器位于另一个国家/地区，并且延迟使得在日历加载之前预取所有 qtip 文本的时间太长(最多 8 秒)。我编写了返回所需 qtip 信息的 ajax 函数，但问题是 eventRender 函数在 qtip 信息出现之前运行。因此，在我看来，最合乎逻辑的解决方案是在 eventMouseover 事件中附加 qtip(通过 ajax 发送对 qtip 文本的请求，然后将 qtip 附加到元素)，但我找不到如何访问事件元素来自 eventMouseover 事件。 (我尝试将 qtip 附加到 mouseover 事件的 $(this) ，但没有任何反应(也没有错误)。

我还尝试过另一种方法。加载日历后，我在后台获取所有工具提示，然后尝试 .fullCalendar( 'rerenderEvents' ) 但这不会按预期工作 -> 例如，除非您更改 View /更改月份，否则不会出现新的工具提示只有这样，新的工具提示(在后台获取)才会出现，所以我相信 rerenderEvents 不起作用。

关于如何解决这个问题有什么建议吗？

eventRender 的代码(有效):

eventRender: function (event, element) {

  if (event.qtip_id) {
    element.qtip({    
      content: {    
        title: $('#' + event.qtip_title_id).html(),
        text: $('#' + event.qtip_id).html()
      },
      position: { 
        my: 'bottom center',
        at: 'top center',
        //target:  'mouse',
        adjust: { mouse: false },
        viewport: $(window),
      },
      style: {
        classes: 'bigger_font qtip-light qtip-shadow'
      },
      show:  {
        delay: 500
      },
      hide:  {
        fixed: true
      }
    });
  }

渲染日历后在后台获取所有工具提示的代码:

for (i = 0; i<all_events.length; i++) {
  if (all_events[i].qtip_id) {
    //alert(all_events[i].title); 
    myevent = {
      title: all_events[i].title,
      url: all_events[i].url,
      color: all_events[i].color,
      form_id: all_events[i].form_id,
      priority: all_events[i].priority,
      qtip_id: all_events[i].qtip_id,
      qtip_title_id: all_events[i].qtip_title_id,
      qtip_dealer: all_events[i].qtip_dealer,
      qtip_country_id: all_events[i].qtip_country_id,
      qtip_customer_id: all_events[i].qtip_customer_id,
      qtip_customer_name: all_events[i].qtip_customer_name,
      qtip_id: all_events[i].qtip_id,
      qtip_id_id: all_events[i].qtip_id_id
    };

    $.ajax({
      type: 'POST',
      url: 'ajax/calendar_generate_qtip.php',
      data: myevent,
      dataType: 'html',
      success: function(data) {      
        $('#qtip_holder').html($('#qtip_holder').html() + data);
      }
    }).fail(function() {

    });
  }
}

$('#calendar').fullCalendar('rerenderEvents');

所以我的问题是:是否可以在完整日历的 eventMouseover 事件中创建和显示 qtip？ (因为 eventMouseover 无法访问事件的元素，至少我看不到它)。

感谢您的阅读。

附注我为我蹩脚的英语道歉。

Answer 1

如果您想通过 eventMouseover 访问事件的元素，这是可能的。

从 FullCalendar 文档中，它清楚地表明，在 eventMouseover 的回调函数中，“this”被设置为事件的 <div> element 和 $(this) 提供与您在 eventRender 回调中获得的相同元素对象。 http://fullcalendar.io/docs/mouse/eventMouseover/

你提到过

(I have tried attaching the qtip to $(this) of mouseover event, but nothing happens

但我相信这是正常的鼠标悬停事件而不是回调。