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 cl

Answer 1

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/

Answer 2

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