jQuery：複数のリスト間で項目を移動するための切り替えボタン

Question

私は3つのリストを持っています。各項目にはボタンのツールバーがあります。リストは、ステージ、ライブ、固定されています。トグルボタンを使ってリスト間で項目を移動しようとしています。下のjsfiddleの例からもわかるように、ボタンを持って項目を移動していますが、私はいくつかの助けを得ることを望んでいた2つの問題に遭遇しました。私は視覚的な学習者です、私は運のない例としてStackoverflowとGoogleの全面を見ました。

備考 - 編集ボタンとゴミ箱ボタンはアイテムを移動しません。各変更をコミットするために、各トグルアクション内でajax呼び出しを実行します。これをjsファイルに書き留めました。

実施例：http://jsfiddle.net/RuRdZ/3/

問題：

1 - ボタンをクリックすると、例えば上演リストに「ライブしてください」、項目が適切にライブリストに移動しますが、このアイテムのボタンは無効になっているように見えます。移動後、アイテムを削除したり、再度ステージングすることはできません。これは私の目標がページをリフレッシュしないことであるため、問題になります。

2 - リストからリストに項目を移動するときに、適切なボタンを消滅/表示させる方法を見つけようとしていました。例えば、私がステージ上のアイテムをライブにすると、アイテムが動いたときに、私は「生きている」ボタンを隠して「ステージ」ボタンを表示したいと思います。私はいくつかのことを試しましたが、私は正しいセレクタを使用しているとは思いません。各見出しには、各リストに表示される適切なボタンがリストされています。

ありがとうございました！

Answer 1

は別のものに存在していた要素を追加すると、元の容器要素から削除し、クローンを使用していない - それは、ボタンイベント

は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')); 
    });