Question

第一次提问者在这里。我在这里使用了几个不同的线程来构建一个fullcalendar，在fancybox中打开事件信息。更具体地说，每天都有一个链接（结构化为事件），在fancybox中打开当天事件的列表。

我使用以下代码构建了日历和fancybox链接：

$('#calendar').fullCalendar({
  height: 550,
  eventClick: function(event) {
    if (event.url) {
      $("a").fancybox({
        'href'  : event.url,
        'width' : '6',
        'height'        : '100%',
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic',
        'type'          : 'iframe'
      });
      return false;
    }
  },

  eventSources: [
    {
      events: [
      <?php
      $query = "SELECT date, COUNT(*) AS num_events FROM events GROUP BY date ORDER BY date";
      $result = mysql_query($query);
      $numRows = mysql_num_rows($result);
      $count = 0;
      while ($row = mysql_fetch_assoc($result))
      {
        $count++;
        $num_events = $row['num_events'];
        if ($num_events == '1') {$num_events .= ' event';}
        else {$num_events .= ' events';}
        $url = 'dayEvents.php?d='.$row['date'];
        $date = $row['date'];
        ?>
        {
        title   : '<?php echo $num_events; ?>',
        start   : '<?php echo $date; ?>',
        url : '<?php echo $url; ?> '
        }<?php if ($count < $numRows) { echo ","; } ?>
      <?php }?>                             
      ],
      color: 'white',
      textColor: '#2287c4'
    }
  ]
})

});

以下是我遇到的情景：

我点击链接A，没有任何反应我再次点击链接A，fancybox打开链接A的网址。我退出了fancybox。我点击链接B，fancybox再次打开链接A的网址。我退出了fancybox。我点击链接C，fancybox打开链接B的网址。此外，如果我点击日历外的任何链接，它会打开一个带有链接C的网址的fancybox（直到我点击日历中的某个事件才会发生这种情况。）

基本上，链接是一键延迟，而fancybox正在为页面上的任何链接创建一个事件处理程序。有没有人知道可能导致这种情况的原因以及我可以采取哪些措施来解决这个问题？

感谢。

Answer 1

目前，每当您的用户点击某个活动时，您的代码会在整个页面上的每个“a”元素上放置一个奇特的框，从而导致您看到的奇怪行为。

不要使用'eventClick'回调，而是将你的fancybox初始化代码放在'eventAfterRender'回调中。顾名思义，在绘制每个日历事件后调用此回调。这样，当日历加载时，将会初始化花式框，并在用户单击事件时准备就绪。

此外，您需要从$（“a”）修改您的jquery选择器.fancybox（....到$（“a”，元素）.fancybox（...其中'element'是提供给的参数fullcalendar回调eventAfterRender（请参阅eventAfterRender函数的fullcalendar文档）。这会将选择器限制为刚刚渲染的单个日历事件的div。

修改在阅读了有关fancybox的更多信息之后，我发现您可以直接打开它而无需先将其附加到＆lt; a＆gt;元件。这可能是一个比我上面提到的更好的解决方案，因为除非用户实际点击日历事件，否则你不会初始化任何fancybox。因此，在fullcalendar初始化中，只需使用以下内容替换eventClick：

eventClick: function(event) { if (event.url) { $.fancybox({ 'href' : event.url, 'type' : 'iframe', other options as you like... }); return false; } },

从fullcalendar事件打开一个fancybox - 单击该事件将打开之前选择的事件的url

1 个答案: