1

我在 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

好的，第一个问题已经解决，感谢下面乍得提供的提示。我已经将点击事件重写为两个函数，以便在DOM中重新创建元素后可以重新实例化点击事件：

    //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 的谜团，尽管滑块保留了它的值，如荧光笔轨道上所示。

4

0 回答 0