FullCalendar结合Bootstrap Modal点击事件后数据串扰问题求助

看起来你遇到的是Bootstrap模态框内容未正确更新的典型问题，结合你的代码，我梳理了几个可能的原因和对应的解决办法：

1. 模态框打开与内容更新的顺序颠倒 #

你的代码里是先打开模态框，再更新内容：

$('#modal_window').modal();
$('#modal_title').html(event.event.extendedProps.client_name);

Bootstrap模态框调用.modal()后会立即渲染DOM结构，第一次打开后模态框的DOM还会被缓存，后续的内容更新可能因模态框已初始化完成，导致新内容无法被正确渲染到页面上。

解决办法：调整顺序，先更新内容再打开模态框：

// 先更新模态框内容
$('#modal_title').html(event.event.extendedProps.client_name);
// 再触发模态框打开
$('#modal_window').modal();

2. 事件属性取值不匹配（潜在笔误） #

看你定义的events数据结构：

events: [
  {% for event in events %}
  {
    id: '{{event.id}}',
    user: '{{event.user}}',
  },
  {% endfor %}
]

但在eventClick里你取的是event.event.extendedProps.client_name，这里的client_name并没有在events的扩展属性里定义（你实际定义的是user）。如果第一次显示正常，可能是你实际代码里的键是匹配的，但这个笔误会导致后续点击出现异常，建议检查属性名是否一致：

// 改成和events里对应的键，比如user
$('#modal_title').html(event.event.extendedProps.user);

3. 模态框关闭时未清空内容（可选优化） #

为了彻底避免模态框残留旧内容，你可以监听模态框的hidden.bs.modal事件，在关闭时主动清空内容：

$('#modal_window').on('hidden.bs.modal', function () {
  $('#modal_title').html('');
});

把这些调整结合起来，最终的eventClick方法可以改成这样：

eventClick: function(event) {
  console.log('modal', event);
  // 确保属性名与events定义一致
  $('#modal_title').html(event.event.extendedProps.user);
  $('#modal_window').modal();
}

这样应该就能解决点击不同事件时模态框显示旧内容的问题了。

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