Функция работает после второго щелчка

Question

Это часть моего кода, и я не понимаю, почему она работает после второго щелчка. Он должен работать после первого нажмите JSFIDDLE

jQuery(document).ready(function($){ 
    var mainfunction = 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'); 
     }); 
    }; 
    mainfunction(); 
}); 

Answer 1

Вы должны прочитать данные из щелкнутого элемента

var typelink = $this.data("date"); 

Демы: Fiddle

При нажатии кнопки в первый раз, вы читаете данные активного элемента, который является декабрем до того, как активному классу присваивается текущий элемент с щелчком

Answer 2

Вы должны использовать текущий объект, который находится в $this, она WLL всегда ищет первый $('.block-head__link.active') в DOM, щелкните событие не будет работать в первый раз:

var typelink = $this.attr("date"); // $this change here 

Demo

Answer 3

попробовать этот

Работа скрипку: jsfiddle.net/kngU8/5

$blockhead.on("click", function(e){ 
     var $this = $(this); 
     var typelink = $this.attr("data-date"); 
     $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'); 
     return false; 
    }); 

Answer 4

работает jsfiddle: http://jsfiddle.net/patelmilanb1/kngU8/6/

$(document).ready(function() { 
    var myfunction = function() { 
     $(".block-head__link").on("click", function (e) { 
      e.preventDefault(); 
      var typelink = $(this).data("date"); 
      $('.block-head__menu').removeClass("active"); 
      $(this).addClass("active"); 
      $(".periods").removeClass('active'); 
      $(".periods[data-period=" + typelink + "]").addClass('active'); 
     }); 
    }; 
    myfunction(); 
});