javascript - 为什么实际的鼠标点击不起作用，但在 JS 控制台中执行 .click() 却可以？

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

您有两个具有相同 id 的按钮。

jQuery # 选择器仅找到该 id 的第一个匹配，因此第一个按钮被隐藏。

删除它或更改它的名称，它应该可以工作;-)

编辑:

您还可以将它们更改为 .className 而不是 id 以及对类的所有相应引用，它应该可以工作。