加载时的全日历功能

Question

在议程视图中，我的屏幕上显示了 7 天，我有按钮可以在一个月内导航（即转到第二天）。我有一个功能可以让我点击我点击的时间段的开始和结束。它在 7 天内工作正常，但仅在加载的页面上工作，但如果我单击转到第二天并单击一个时间段，它就不再工作了。我检查了 html 结构，它仍然相同，但我的功能不起作用。

这是我的代码：

$("div.fc-slats table tbody tr").click(function () {
                var borne_sup = $(this).attr("data-time");
                var borne_inf = $(this).next().attr("data-time");
                console.log(borne_sup);
                console.log(borne_inf);
            });

你能帮帮我吗？

Answer 1

如果您只是在首次呈现日历时添加点击事件，那么它将附加到此时的每一行。当您单击下一个新元素时，新元素将被添加到 DOM，因此如果您不再次运行代码，元素将不会附加点击事件。

修复应该可以解决问题，但是另一种方法是使用 FullCalendar 回调 eventClick，这样您就可以访问您点击的事件，而不必手动附加点击处理程序。

eventClick(event, jsEvent, view) {
  console.log(event.start, event.end);
}

Example Codepen

Answer 2

我是网络开发的新手，所以我不知道该怎么做，但我找到了另一种方法：

$("body").on("click", "div.fc-slats table tbody tr", function () {
                borne_sup = $(this).attr("data-time");
                borne_inf = $(this).next().attr("data-time");
                console.log(borne_sup);
                console.log(borne_inf);

            });

感谢您的帮助。

加载时的全日历功能

fullcalendar function on load

jquery

fullcalendar