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的first match，因此隐藏了第一个按钮。

删除它或更改它的名称，它应该有用; - ）

编辑：

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

为什么实际的鼠标点击不起作用，但在JS控制台中执行.click（）呢？

1 个答案: