Search code examples
javascriptcallbackquicksand

Callback needed, don't know how


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.


Solution

  • 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.