如何在 document.ready 中获得一个准备好的功能和另一个功能？答案

【问题标题】：How do I get a ready function and another function to play nicely in document.ready?如何在 document.ready 中获得一个准备好的功能和另一个功能？
【发布时间】：2015-02-03 03:27:25
【问题描述】：

在我的post.js 中，我有这个：

var ready;
ready = function() {

    // This is the Sidebar toggle functionality
    var toggleSidebar = $(".togglesidebar");
    var primary = $("#primary");
    var secondary = $("#secondary");

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

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

$(document).ready(ready);

这在大多数情况下都有效。有时toggleSidebar 不会切换（例如，当您转到其他页面并返回主按钮所在的主页面时......它不会切换。我必须在页面开始之前刷新页面再次工作......我怀疑这与Turbolinks有关）......但这是一个附带问题。这不是这里的核心问题。

我也有这个：

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

    if (body_value.length == 0) {
        $('#wordCountBody').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 wordCountTitle = title_value.trim().replace(regex, ' ').split(' ').length;

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

$(document).on('ready page:load', function () {
  $('#count').click(counter);
    $('#post_body, #post_title').on('change keydown keypress keyup blur focus', counter);
});

这根本不起作用。事实上，每当我将光标放在 JS 控制台中的 #post_title 文本字段中时，我都会收到此错误：

Uncaught TypeError: Cannot read property 'length' of undefined

我怀疑与上述有关。

这可能是什么原因造成的？

另外，我不确定我的post.js 文件中这些语句的顺序是否真的重要，我为了这个问题的目的更改了顺序 - 所以更清楚了。

但是，在我实际的post.js 中，顺序是：

var ready;
ready function() declaration
counter function() declaration
$(document).ready(ready);
$(document).on('ready page:load', function () {
  $('#count').click(counter);
    $('#post_body, #post_title').on('change keydown keypress keyup blur focus', counter);
});

所有这些都感觉不对，我只是不知道如何将它们组合起来并清理它。

想法？

【问题讨论】：

哪行代码出现.length 错误？
另外，这个问题和rails有什么关系？在我看来，您应该删除 rails 标签。
因为这是在 Rails 项目中，资产管道管理 JS 文件的方式与独立项目不同。我也在使用 Turbolinks...这确实会影响行为。
那么，很明显body_value 是undefined，这是因为$('#post_body').val() 返回undefined，如果#post_body 不存在或不存在，就会发生这种情况具有.val() 方法的表单对象。我认为我们必须查看您的 HTML 以提供进一步的建议。
啊...@jfriend00 你是对的。该特定元素有一个id=body-field。所以我只是将变量body_value 更改为指向ID，它现在可以工作了。现在它以不同的方式表现得很奇怪，我将为此创建一个新问题。如果您用该信息回答问题，我会接受。谢谢！

标签： javascript jquery ruby-on-rails ruby-on-rails-4 asset-pipeline

【解决方案1】：

然后，很明显 body_value 是未定义的，这是因为$('#post_body').val() 返回未定义，如果#post_body 不存在或者它不是具有.val() 方法的表单对象，就会发生这种情况。我认为我们必须查看您的 HTML 以提供进一步建议，但似乎 #post_body 不存在。

【讨论】：