FullCalendar v3 clientEvent在jQuery点击事件中仅触发一次的问题排查

我来帮你分析问题根源，再一步步给出修复方案：

1. 先修复代码作用域的核心错误 #

你当前的代码里，alert(eobj.length)和后续获取eventsrec的逻辑写在了$(document).ready()回调外面——这会导致这些代码在DOM、日历初始化完成前就执行，而且eobj在全局作用域根本未定义。第一次点击能生效大概率是浏览器临时缓存或变量提升的巧合，后续点击必然出问题。

先把所有相关代码挪到ready回调内部，确保作用域正确：

$(document).ready(function() {
    // 缓存日历元素，避免重复DOM查询
    var $calendar = $('#calendar1');
    
    // 初始化日历
    $calendar.fullCalendar({
        header: { left: 'title', center: '', right: '' },
        selectable: true,
        selectHelper: true,
        defaultView: 'listDay',
        events: 'list.php',
        eventColor:"#FF0000",
    });

    // 监听表格行点击事件
    $("tr").click(function(e) {
        var rcd = this.id;
        alert(rcd);
        
        // 简化自定义字段的过滤逻辑
        var eobj = $calendar.fullCalendar('clientEvents', function(evts) {
            return evts.record === rcd;
        });

        // 在点击回调内部处理eobj（这才是正确的位置）
        if(eobj.length > 0) {
            alert(eobj.length);
            var eventsrec = eobj[0].record;
            alert(eventsrec);
        } else {
            alert('未找到匹配的日历事件');
        }
    });
});

2. 解决$(...).fullCalendar is not a function报错 #

这个错误的核心是jQuery实例丢失了FullCalendar的插件方法，常见触发场景有：

• 页面加载了多个版本的jQuery：比如先加载jQuery 3.x，后续又加载另一版本，新的jQuery会覆盖旧实例，导致FullCalendar绑定的插件方法丢失。
• 日历DOM元素被意外替换：比如某些代码用html()或replaceWith()替换了#calendar1，原日历实例被销毁，新元素未重新初始化日历。
• 脚本加载顺序错误：FullCalendar必须在jQuery之后加载，否则无法绑定插件方法。

对应修复方案： #

• 检查脚本加载顺序：确保先加载jQuery，再加载FullCalendar的JS文件（v3版本还需依赖moment.js，也要放在jQuery之后）。
• 移除重复的jQuery引用：打开浏览器控制台的网络面板，排查是否有多个jQuery请求，删除多余的引用。
• 检查DOM修改逻辑：如果有动态替换#calendar1的代码，替换后必须重新初始化FullCalendar。
• 用jQuery.noConflict()避免库冲突（如果页面有其他库占用$）：

jQuery.noConflict();
jQuery(document).ready(function($) {
    // 这里的$就是我们需要的jQuery实例
    var $calendar = $('#calendar1');
    // 后续代码和上面的示例一致
});

3. 额外优化建议 #

• 给目标表格行添加专属类名（比如.calendar-event-row），不要直接绑定所有tr的点击事件，避免无关表格行触发逻辑：

$(".calendar-event-row").click(function(e) {
    // 你的点击逻辑
});

• 在日历的eventRender回调里同步事件与表格行的关联，让匹配更可靠：

$calendar.fullCalendar({
    // 其他配置
    eventRender: function(event, element) {
        // 把事件ID同步到对应表格行的data属性里
        $('#' + event.record).data('event-id', event._id);
    }
});

这样修改后，应该能彻底解决首次点击生效、后续失效的问题，同时消除jQuery方法报错。

内容的提问来源于stack exchange，提问作者jd_bdi