Callback needed, don't know how

Question

My problem is this. that i create a list of <li> in side <ul> element. when you click on one of thouse <li> elements, the others disappear. now when you click on [See all items], the previous list appears agen. But now when you click on the other element, nothing happens. That should be because the new element doesn't know what todo when you click it. we need a callback! But i don't get what should i write in to this callback function?!

My Code: http://jsfiddle.net/cRcNB/. In JS section there is easying.js and quicksand.js befor. so scroll down(all the way) and you'll see my (Short)code. :)

I ll post my code here as asked:

$(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 and Easing.js is required as well.

So i could return the previous list. Quicksand replaces one list with the other :) So Holder always gets replaced. but i will always have the original list :) — Mihkel L., Feb 19 '13 at 18:57

score 2 · Accepted Answer · answered Feb 19 '13 at 19:02

Try replacing

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

with:

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

This will bind the click handler to the <ul> which is always in the DOM. When you are removing the <li>'s you are also throwing away their click handlers. This could be the problem.

Aaaa... that's beautiful man :P and solved the problem. But still don't know how to solve it with call back :D — Mihkel L., Feb 19 '13 at 19:13

Hanlet Escaño · Answer 2 · 2013-02-23T19:22:26.533

1

Here is a simpler version of the code:

Markup:

<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/

edited Feb 23 '13 at 19:22

answered Feb 19 '13 at 19:15

Hanlet Escaño

17,114
8
52
75

can you add more documentation on how the "selected" works. I can't see that you add a class named like that, so what's the deal there? – Mihkel L. Feb 23 '13 at 17:29
I removed that, it was part of an earlier attempt. – Hanlet Escaño Feb 23 '13 at 19:22

Callback needed, don't know how

2 Answers2