在DOM中移动多个JQueryUI滑块，同时保持功能和安全性。值

Question

我在div .origin中有一个包含大量JQueryUI滑块的页面。每个滑块都有一个相关的复选框如果选中该复选框，则应移动滑块 - 所有值保持不变 - 到div .favourites。如果未选中该复选框，则应将滑块移回.origin。

Here's a JSFiddle of my attempts so far.

这是我的函数，用于检测复选框的值并相应地进行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）首先，最重要的是，在滑块及其父元素已移入.origin div后，单击复选框不再注册。 alert(checked)不会触发，else语句不会运行。为什么复选框在移动到DOM后不再注册click事件？

2）其次，移动的滑块在高亮显示div上显示正确的值，但是拉杆手柄返回到起始位置。如何在拖拉机手柄处于正确位置的情况下重新初始化滑块？

-

更新 - JSFIDDLE

好的，第一个问题已经解决了，这要归功于下面Chad提供的提示。我已经将click事件重写为两个函数，以便在DOM中重新创建元素之后可以重新实例化click事件：

    //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的谜团，如荧光笔轨迹所示。