添加/移除收藏功能Ajax失效问题排查求助

嘿，我来帮你分析下问题出在哪～

你的「移除收藏」功能失效，本质是动态修改DOM元素ID后，事件绑定没有跟上：

• 页面刚加载时，DOM里只有#addToFavoriteButton这个元素，你给#RemoveFavoriteButton绑定的.click()事件根本找不到目标元素，相当于白绑定了；
• 当你把元素ID改成#RemoveFavoriteButton后，这个新“身份”的元素并没有被绑定移除逻辑的点击事件，所以点击它自然没反应。

事件委托是处理动态元素事件的最佳方案——把事件绑定到一个**始终存在的父元素（比如document或固定容器）**上，监听子元素的点击行为，不管子元素是初始就有还是后来动态修改的，都能触发对应的逻辑。

修改后的代码可以合并成更简洁的版本：

// 用事件委托统一处理添加/移除收藏
$(document).on('click', '#addToFavoriteButton, #RemoveFavoriteButton', function(event) {
  event.preventDefault();
  const $btn = $(this);
  const itemId = $btn.data('itemid');

  if ($btn.attr('id') === 'addToFavoriteButton') {
    // 执行添加收藏逻辑
    $.post('/system/ajax.php', { AddFavID: itemId }, function(response) {
      $btn.attr('id', 'RemoveFavoriteButton');
    });
  } else {
    // 执行移除收藏逻辑
    $.post('/system/ajax.php', { RemoveFavbidID: itemId }, function(response) {
      $btn.attr('id', 'addToFavoriteButton');
    });
  }
});

• 用$(this)代替重复通过ID获取元素，代码更高效简洁；
• 可以给按钮加个临时禁用状态（比如点击后设置disabled=true，请求完成后再恢复），避免用户重复点击触发多次请求；
• 变量名可以统一用驼峰式（比如itemId），保持代码风格一致性。

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