Question

我有一个动态创建的日历，它隐藏了事件的div（css）。我有一个JQuery函数，应该在事件悬停时显示div，但它似乎不想工作。我已经阅读了本网站上有关该问题的所有内容，但没有运气。

动态内容：

$calendar.= '<td class="calendar-day"><div style="position:relative;height:100px;">';
        /* add in the day number */
        $calendar.= '<div class="day-number">'.$list_day.'</div>';

        $event_day = date('Y-m-d',strtotime($year.'-'.$month.'-'.$list_day));
                        foreach($events as $event) {
                            if ($event[ArrDate] == $event_day) {
                                $cntry = $event[CountryID];
                                $calendar.= '</br></br><div class="event" style="background-color:#1' .stringToColorCode($cntry). '">'.$event[CaptainLast]."<div class='teampopup'><table><tbody><tr><u>Team Info:</u></tr></br><tr>Captain: " . $event[CaptainFirst]. " " . $event[CaptainLast] . "</tr></br><tr>Country: " . $event[CountryID]. "</tr></br><tr>Dates: " . date("n/j",strtotime($event[ArrDate])). " - ". date("n/j",strtotime($event[DepDate])). ", " . date("Y",strtotime($event[ArrDate])). "</tr></br><tr>Type: " . $event[Type]. "</tr></tbody></table></div></div>";
                            }
                        }
$calendar.= '</div></td>';

和Javascript：

$(document).ready(function(){
   var moveLeft = -200;
   var moveDown = -50;
   $('#content').on("mouseenter", ".event", function() {
      $(this).find('.teampopup').show();
   }) .on("mouseleave", ".event", function() {
      $(this).find('.teampopup').hide();
   });
});

额外信息：“content”是加载动态创建内容的容器，对我的javascript文件的调用低于所有其他脚本标记，位于结束标记之上。提前谢谢。

外部JQuery不适用于动态内容

0 个答案: