jQuery Ajax待办列表点击复选框后布局错乱问题求助

问题现象 #

使用jQuery和Ajax开发待办列表时，触发任务完成标记的点击事件后出现两个问题：

• 页面布局错乱，待办列表从列布局变为行布局
• 复选框无法再次点击将任务切换回活跃状态，仅能通过刷新页面恢复

问题截图：

问题根源分析 #

1. 重复绑定事件导致冲突：同时绑定了change委托事件和click直接事件，直接事件无法作用于动态生成的新任务，且两个事件逻辑重叠引发冲突。
2. DOM层级错误破坏布局：在change事件中错误调用$(this).parent().parent().addClass("task-completed")，给上层的Bootstrap .row元素添加了自定义类，破坏原有布局结构。
3. 样式逻辑重复且不一致：既用CSS类.task-completed控制背景色，又通过.css()直接设置样式，导致页面刷新后样式状态不统一。
4. 筛选按钮active类逻辑无效：添加active类后立即移除，导致按钮状态无变化。

修复方案 #

1. 移除重复的事件绑定 #

删除以下冗余的click事件处理函数：

$(".mark-complete").on('click', function(e) {
  $('.task').each(function(i, el) {
    if ($(this).find('.mark-complete').prop('checked')) {
      $(this).css('background-color', 'rgba(36, 236, 36, 0.116)');
    }
  })
});

保留委托式的change事件即可，它能处理动态生成的任务元素。

2. 修正DOM层级操作 #

修改change事件中添加/移除类的代码，确保操作的是任务行本身：

$(document).on("change", ".mark-complete", function() {
  const taskRow = $(this).parent();
  if (this.checked) {
    taskRow.addClass("task-completed");
    markTaskComplete($(this).data("id"));
  } else {
    taskRow.removeClass("task-completed");
    markTaskActive($(this).data("id"));
  }
});

3. 统一样式控制逻辑 #

删除直接设置背景色的代码，完全通过.task-completed类控制样式。同时在任务渲染时直接给已完成的任务添加该类：
修改getAndDisplayAllTasks中的任务渲染代码：

$("#todo-list").append(
  '<div class="task row ' + (task.completed ? 'task-completed' : '') + '"><p class="col-xs-8">' +
  task.content +
  '</p><button class="delete" data-id="' +
  task.id +
  '">Delete</button><input type="checkbox" class="mark-complete" data-id="' +
  task.id +
  '"' +
  (task.completed ? "checked" : "") +
  ">"
);

4. 修复筛选按钮active状态 #

以“Active”按钮为例，修改逻辑为：先移除所有筛选按钮的active类，再给当前按钮添加：

$("#active-btn").on("click", function() {
  $(".task").each(function(i, el) {
    if ($(this).find(".mark-complete").prop("checked")) {
      $(this).hide();
    } else {
      $(this).show();
    }
  });
  $(".filter").removeClass("active");
  $(this).addClass("active");
});

同理修改“All”和“Completed”按钮的对应逻辑。

验证效果 #

完成以上修改后：

• 标记任务完成/活跃时，布局不再错乱
• 复选框可正常切换任务状态，无需刷新页面
• 筛选按钮的active状态显示正常

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