Function work after second click

Question

Anyboby help. Why function add class active this.parents(".block-parent").find(".periods[data-period="+typelink+"]").addClass('active') work after second click? need to be done after first click! link for not right example http://jsfiddle.net/kngU8/

Page.contentSort = function() {
    var $eachblocks = $(".top10_month .periods");
    var $blockhead = $(".block-head__link");
    $blockhead.on("click", function(e){

        var $this = $(this);
        var typelink = $(".block-head__link.active").attr("data-date");
        e.preventDefault();
        $this.parents("ul").find("a").removeClass("active");
        this.className += " active";
        $this.parents(".block-parent").find(".periods").removeClass('active');
        $this.parents(".block-parent").find(".periods[data-period="+typelink+"]").addClass('active');
    });
};

Answer 1

because in first click you initialize the code so it works in second click! common logic use $(function()); like this

$(function(){
    var $eachblocks = $(".top10_month .periods");
var $blockhead = $(".block-head__link");
$blockhead.on("click", function(e){

    var $this = $(this);
    var typelink = $(".block-head__link.active").attr("data-date");
    e.preventDefault();
    $this.parents("ul").find("a").removeClass("active");
    this.className += " active";
    $this.parents(".block-parent").find(".periods").removeClass('active');
    $this.parents(".block-parent").find(".periods[data-period="+typelink+"]").addClass('active');
});

});

try this this should work

Answer 2

It's because you're using this

var typelink = $(".block-head__link.active").attr("data-date")

to find the link you've just clicked on, and you haven't dealt with changing the classes yet so it's getting the previous element you gave the class active to. The following will return the correct data-date value of the clicked element, not one you think it might be that's saught by class name.

var typelink = $(this).data("date");
// var typelink = $(this).attr("data-date"); // this isn't how data is used

http://jsfiddle.net/kngU8/7/