需要回调，不知道怎么做答案

【问题标题】：Callback needed, don't know how需要回调，不知道怎么做
【发布时间】：2013-02-24 03:22:26
【问题描述】：

我的问题是这个。我在<ul> 元素中创建了一个<li> 列表。当您单击其中一个 <li> 元素时，其他元素就会消失。现在，当您单击[See all items] 时，会出现上一个列表 agen。但是现在当您单击另一个元素时，什么也没有发生。那应该是因为新元素不知道当你点击它时要做什么。我们需要一个回调！但是我不知道我应该在这个回调函数中写什么？！

我的代码：http://jsfiddle.net/cRcNB/。在 JS 部分有 easying.js 和 quicksand.js。所以向下滚动（一直），你会看到我的（短）代码。 :)

我会按要求在这里发布我的代码：

$(document).ready(function(){   
    var $holder = $('ul.holder');
    var $data = $holder.clone();

    $('ul.holder li').click(
        function(e){
            $holder.quicksand($(this),{
                duration: 800,
            });
        return false;
    }); 
    $('#all').click(
        function(e){
            $new = $data.find('li')
            $holder.quicksand($new,{
                duration: 800
            }
        );
        return false;
    });
})

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li id='all'>[See all items]</li>
    </ul>
    <ul class='holder'>
        <li data-id="1" data-type="a">heaven</li>
        <li data-id="2"data-type="b">love</li>
    </ul>
</body>
</html>

还需要 Quiksand1.3.js 和 Easing.js。

【问题讨论】：

你为什么要克隆$holder？
所以我可以返回之前的列表。流沙用另一个列表替换了一个列表:) 所以 Holder 总是被替换。但我将永远拥有原始列表:)

标签： javascript callback quicksand

【解决方案1】：

尝试替换

$('ul.holder li').click(
    function(e){
        $holder.quicksand($(this),{
            duration: 800,
        });
    return false;
});

与：

$('ul.holder').on('click', 'li', function(e){
        $holder.quicksand($(this),{
            duration: 800,
        });
    return false;
});

这会将点击处理程序绑定到始终在 DOM 中的<ul>。当您删除<li> 时，您也在丢弃他们的点击处理程序。这可能是问题所在。

【讨论】：

Aaaa... 好人 :P 解决了问题。但仍然不知道如何通过回调来解决它：D

【解决方案2】：

这是一个更简单的代码版本：

标记：

<ul>
    <li id='all'>[See all items]</li>
</ul>
<ul class='holder'>
    <li data-id="1" data-type="a">heaven</li>
    <li data-id="2"data-type="b">Earth</li>
    <li data-id="2"data-type="b">Dirt</li>
    <li data-id="2"data-type="b">Peace</li>
    <li data-id="2"data-type="b">More</li>
</ul>

jQuery:

$("#all").on("click",function(){
    $(".holder li").show("slow");
});
$(".holder li").on("click",function(){
    $(".holder li").not($(this)).hide("slow");
});

JSFiddle：http://jsfiddle.net/5ChVE/5/

【讨论】：

您能否添加更多关于“选定”如何工作的文档。我看不到你添加了一个这样命名的类，那有什么关系呢？
我删除了它，这是早期尝试的一部分。