AJAX动态生成的checkbox无法点击、不切换勾选状态如何解决？

你的复选框无法点击的核心原因是：你将<input type="checkbox">和对应的<label>元素嵌套在了<a>跳转标签内部。点击复选框/爱心图标时，事件会优先触发上层<a>标签的默认跳转行为，直接拦截了复选框的选中状态切换逻辑。

• 方案1（更推荐，无逻辑冲突）：调整DOM结构，把复选框和label移出<a>标签
  你可以把原来包裹图片、复选框的<a>标签拆分，外层用定位容器包裹，不会影响原有的视觉布局：

  // 修改这部分代码
  $output .= "<div class='col-4'>
  <div class='post-content'>
  <!-- 新增外层定位容器 -->
  <div class='post-img-wrap' style='position:relative;'>
  <a href='single-post.php?id={$row['post_id']}' class='post-img'>
    <img src='dashboard/uploads/{$row['post_img']}'>
  </a>";
  if(isset($_SESSION['logged-in'])){
      // 复选框和label移到a标签外面，加绝对定位放在你需要的位置
      $output .= "<input type='checkbox' id='{$row["post_id"]}' value='{$row['post_id']}' class='fav-icon-checkbox' style='position:absolute;top:10px;right:10px;z-index:2;'>
                  <label for='{$row["post_id"]}' style='position:absolute;top:10px;right:10px;z-index:2;'><i class='fa fa-heart fav-icon'></i></label>";
  }
  $output .= "</div>
  // 后续原有代码保持不变
  

  调整后点击图片触发帖子跳转，点击爱心/复选框只会切换选中状态，逻辑完全独立没有冲突。

• 方案2（不改DOM，临时修复）：添加JS阻止事件冒泡
  因为你的复选框是AJAX动态生成的，需要用事件委托绑定点击事件，阻止点击事件冒泡到上层的<a>标签：

  $(document).on('click', '.fav-icon-checkbox, .fav-icon-checkbox + label', function(e) {
    e.stopPropagation();
  });
  

  这个方案的弊端是点击复选框/爱心时不会触发帖子跳转，如果你的产品逻辑允许这种交互可以直接用。

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