jQuery无法识别动态切换类：双向移动li元素失效问题咨询

嘿，我来帮你拆解下这个问题的根源，以及怎么解决它～

为什么你的代码无法实现双向移动？ #

你现在的写法是直接给元素绑定点击事件：

$('.web').click(function() { ... });
$('.deposit').click(function() { ... });

这里有两个核心问题：

1. 初始绑定时机的问题：页面加载完成时，.deposit类的元素根本不存在，所以第二个click事件其实没有绑定到任何DOM元素上，自然不会触发。
2. 事件绑定的本质：jQuery的直接事件绑定是绑定在具体DOM元素上的，而不是绑定在“类选择器”上。哪怕你后来给元素切换了类（比如把.web改成.deposit），之前绑定的.web点击事件依然留在这个元素上，不会因为类的变化而自动切换事件逻辑——这就是为什么你总是看到“Append to web”的原因，因为元素身上还留着最初绑定的.web点击事件。

修复方案：使用事件委托（Event Delegation） #

要解决动态元素/类变化的事件绑定问题，最靠谱的方法是用jQuery的事件委托。它的原理是把事件绑定到一个始终存在的父元素（比如页面的document，或者两个ul的共同父容器），然后通过选择器过滤真正要触发事件的目标元素。这样不管元素怎么移动、类怎么修改，只要匹配选择器，事件就能正确触发。

修改后的代码如下：

// 绑定到document（如果有更接近的父容器，用它会更高效）
$(document).on('click', '.web', function() {
  console.log('Append to deposit');
  $('#deposit').append($(this).addClass('deposit').removeClass('web'));
});

$(document).on('click', '.deposit', function() {
  console.log('Append to web');
  $('#web').append($(this).addClass('web').removeClass('deposit'));
});

额外优化建议 #

如果你的两个ul都包裹在一个固定的父容器里（比如<div id="list-container">），建议把事件绑定到这个父容器上，比绑定到document更高效，因为事件冒泡的层级更少：

$('#list-container').on('click', '.web', function() {
  // 逻辑不变
});

$('#list-container').on('click', '.deposit', function() {
  // 逻辑不变
});

这样修改后，你就能实现li元素在两个ul之间双向移动的功能啦～

内容的提问来源于stack exchange，提问作者Мөнхбаатар Ганбаатар