jQuery：使用切换按钮在多个列表之间移动项目

Question

我有三个列表，每个项目都有一个按钮工具栏。这些列表是上演的、实时的和固定的。我正在尝试使用切换按钮在列表之间移动项目。正如您从下面的 jsfiddle 示例中看到的，我有移动项目的按钮，但我遇到了两个问题，我希望得到一些帮助。我是一个视觉学习者，我在 Stackoverflow 和 Google 上都找过例子，但没有成功。

注释 - 编辑和垃圾按钮不会移动项目。我将在每个切换操作中执行 ajax 调用来提交每个更改，我在 js 文件中注意到了这一点。

工作示例： http://jsfiddle.net/RuRdZ/3/

问题：

1 - 当您单击按钮时，例如暂存列表中的“实时”，该项目会正确移动到实​​时列表，但该项目上的按钮似乎被禁用 - 移动后我无法删除该项目或者让它再次上演。这将是一个问题，因为我的目标是不刷新页面。

2 - 当将一个项目从一个列表移动到另一个列表时，我试图弄清楚如何使正确的按钮消失/出现。例如，如果我使一个暂存项目处于活动状态，当该项目移动时，我想隐藏“使活动”按钮并显示“舞台”按钮。我已经尝试了几件事，但我认为我没有使用正确的选择器。在每个标题中，我列出了应出现在每个列表中的正确按钮。

感谢您的帮助！

Answer 1

不要使用克隆，将现有元素附加到另一个元素会将其从原始容器元素中删除 - 它解决了按钮事件

在一个处理程序中执行所有操作的问题 - 然后您将获得对按钮的控制以相应地显示或隐藏它们，

例如

function doAction($element, buttonsToHide, $containerAppendTo) {
  $containerAppendTo.append(element);
  //loop over all buttons inside clicked li
  $('.fg-buttonset', $element).each(function(){
    $currBtn = $(this);

    $currBtn.toggle(!$currBtn.hasClass(buttonsToHide)); //show|hide if needed
  });
}

  $(".doStage").click(function() {
    var $el = $(this).closest('li');
    doAction($el, 'stagedButton', $('#test-list3'));
  });