Почему фактический щелчок мыши не работает, но делает .click() в консоли JS?

Question

Когда я пытаюсь выполнить некоторые JS, нажав кнопку, это не делает то, что я хочу. Однако, когда я запускаю консоль JS и запускаю ее вручную, она работает.

Вот весь мой JS файл (входит в комплект только в случае, если есть конфликт):

var ready; 
ready = function() { 

    // This is the Sidebar toggle functionality that I am most interested in 
    var toggleSidebar = $("#togglesidebar"); 
    var primary = $("#primary"); 
    var secondary = $("#secondary"); 

    toggleSidebar.on("click", function(){ 

     if(primary.hasClass("col-xs-9")){ 
      primary.removeClass("col-xs-9"); 
      primary.addClass("col-xs-12"); 
      secondary.css('display', 'none'); 
     } 
     else { 
      primary.removeClass("col-xs-12"); 
      primary.addClass("col-xs-9"); 
      secondary.css('display', 'inline-block'); 
     } 
    }); 
}; 

$(document).ready(ready); 
$(document).on('page:load', ready); 

counter = function() { 
    var body_value = $('#post_body').val(); 
    var title_value = $('#post_title').val();  

    if (body_value.length == 0) { 
     $('#wordCountBody').html(0); 
     $('#totalCharsBody').html(0); 
     return; 
    } 

    if (title_value.length == 0) { 
     $('#wordCountTitle').html(0); 
     return; 
    } 

    var regex = /\s+/gi; 
    var wordCountBody = body_value.trim().replace(regex, ' ').split(' ').length; 
    var totalCharsBody = body_value.length; 
    var wordCountTitle = title_value.trim().replace(regex, ' ').split(' ').length; 

    $('#wordCountBody').html(wordCountBody); 
    $('#totalCharsBody').html(totalCharsBody); 
    $('#wordCountTitle').html(wordCountTitle); 
}; 

$(document).ready(function() { 
    $('#count').click(counter); 
    $('#post_body, #post_title').on('change keydown keypress keyup blur focus', counter); 
     $('body').tooltip({ selector: "[data-toggle~='tooltip']"}); 
}); 

Вот это HTML, которые инициированы:

<div class="hidden-xs col-sm-3 masthead-group-3 pull-left"> 
    <div id="togglesidebar" class="pull-right"> 
    <button class="btn btn-default btn-lg btn-primary"><i class="fa fa-child"></i> Submit News</button> 
    </div> 
</div> 

Тем не менее, когда я иду в консоль и сделать это он прекрасно работает:

$("#togglesidebar"); 
[<div id=​"togglesidebar" class=​"pull-right">​…​</div>​] 
$("#togglesidebar").click(); 
[<div id=​"togglesidebar" class=​"pull-right">​…​</div>​] 

Вы можете see it live here.

Answer 1

У вас есть две кнопки с одинаковым идентификатором.

jQuery # селектор найти только first match этого идентификатора, поэтому первая кнопка, которая скрыта.

Удалить или изменить его имя, и он должен работает ;-)

Edit:

Вы также можете изменить их в .className, а не как id и все соответствующие ссылки на классы, и он должен работать ,