加载时的全日历功能

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);

            });

感谢您的帮助。