Question

I have a simple content slider. When someone click the red square so many times the slide will stack up.
I used setTimeout to prevent many clicks when its working, but it again stacked up. unbind/bind didn’t work either. In this jsFiddle Code I have put a sample. What should I do to prevent showing the next slide so many times when someone click the red square?

This is a code I’ve used with unbind that does not work:

$(function(){
    $(".circle").click(function(e){
        $(".circle").unbind('click');
        var ref = $(this);
        var id= parseInt(ref.attr('id'));
        $(".circle").attr('src','inactive-circle.gif');
        ref.attr('src','active-circle.gif');
        $(".boxicon").fadeOut(50,function(){
            $("#slide"+id).fadeIn(450);
            $(".circle").bind('click');
        });



    });
})

The final result with a little changes:

$(".circle").click(function() {
    var id = parseInt($(this).attr('id'), 10);
    $(".circle").attr('src', 'inactive-circle.gif');
    $(this).attr('src', 'active-circle.gif');
        $(".boxicon").hide();
    $("#slide" + id).stop(true, false).fadeIn(250);
});

Answer 1

A few mistakes I can see,

When you’re doing a var ref = $(this), you then don’t need to do a $(ref),

So you’re lines,

$(ref).attr('id') 

$(ref).attr('src','active-circle.gif');

Will be,

ref.attr('id') 

ref.attr('src','active-circle.gif');

That might be causing some problems, also,

What are you trying to achieve?

Just had a look at your markup in the fiddle, by that, your jQuery looks a bit messed up for a content slider.

UPDATE

$(function() {
    $(".circle").click(function() {
        var id = parseInt($(this).attr('id'), 10);

        /*the .each() here is optional, you can always do this,
        $(".circle").attr('src', 'inactive-circle.gif');
        */
        $(".circle").each(function() {
            $(this).attr('src', 'inactive-circle.gif');
        });


        $(this).attr('src', 'active-circle.gif');

        /*the .each() here is optional, you can always do this,
        $(".boxicon").fadeOut(50);
        */    
        $(".boxicon").each(function() {
            $(this).fadeOut(50);
        });

        $("#slide" + id).stop(true, true).fadeIn(450);

    });
})​;

made appropriate changes (based on your markup), if you have any doubts, feel free to ask.

Fiddle Link (Have removed unused markup).