javascript - 機能と値を維持しながら、DOM で複数の JQueryUI スライダーを移動する

Question

div に多数の JQueryUI スライダーを含むページがあります.origin。各スライダーには、関連付けられたチェックボックスがあります。チェックボックスがオンの場合、スライダーはすべての値をそのままにして div に移動する必要があります.favourites。チェックボックスがオフの場合、スライダーを に戻す必要があります.origin。

これまでの私の試みの JSFiddle です。

チェックボックスの値を検出し、それに応じてDOMを調整する関数は次のとおりです。

    $('[type="checkbox"]').click(function () {
        var check = $(this),
            checked = $(check).prop("checked"),
            num = $(check).attr("id").split("-")[1],
            parent = $("#food-" + num),
            parentContent = $(parent).clone(),
            slider = "#" + $(parent).find('.slider').attr("id"),
            favelist = $(".favourites .content");
        alert(checked)
        //remove the original
        $(parent).remove();
        if (checked === true) {
            //add to favourites
            $(favelist).append(parentContent);        
        } else {
            //add to origin
            $(favelist).append(parentContent);        
        }
        //reinitialise slider
        loadSlider(slider)
     });

多くのことが機能していません：

1) 最初に、そして最も重要なのは、スライダーとその親要素が.origindiv に移動された後、チェックボックスのクリックが登録されなくなりました。は起動せずalert(checked)、elseステートメントは実行されません。DOM で移動された後、チェックボックスがクリック イベントを登録しなくなったのはなぜですか?

2) 次に、移動したスライダーのハイライト div に正しい値が表示されますが、ドラッガー ハンドルは開始位置に戻ります。ドラッガ ハンドルを正しい位置にしてスライダを再初期化するにはどうすればよいですか?

--

更新- JSFIDDLE

OK、チャドが提供する以下のヒントのおかげで、最初の問題は解決されました。要素が DOM で再作成された後にクリック イベントを再インスタンス化できるように、クリック イベントを 2 つの関数に書き直しました。

    //Listen for checkbox to be checked
    function checkboxChecked() {
        $('[type="checkbox"]').click(function () {
            var checkbox = $(this);
            moveItem(checkbox); 
        });
    }

    //Create/Destroy items when clicked
    function moveItem(checkbox) {
        var check = $(checkbox),
            checked = $(check).prop("checked"),
            num = $(check).attr("id").split("-")[1],
            parent = $("#food-" + num),
            parentContent = $(parent).clone(),
            slider = "#" + $(parent).find('.slider').attr("id"),
            favelist = $(".favourites .content"),
            origin = $(".all .content");
            $(parent).remove();
        if (checked === true) {  
            $(favelist).append(parentContent);        
        } else {
            $(origin).append(parentContent);         
        }
       loadSlider(slider);
       checkboxChecked();    
    }

    //initialise checkbox move function 
    checkboxChecked(); 

ハイライタートラックに示されているように、スライダーがその値を保持しているにもかかわらず、ハンドル位置が0にリセットされるという謎をまだ解決しようとしています。