如何获得ready函数和另一个可以在document.ready中正常播放的函数？

Question

In my post.js , I have this:

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);

Which works MOST of the time. There are times when the toggleSidebar doesn't toggle (eg when you go to a different page and come back to the main where the main button is...it doesn't toggle. I have to refresh the page before it starts working again...I suspect this is related to Turbolinks though)...but that's a side issue. That's not the core issue here.

I also have this:

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);
});

Which doesn't work at all. In fact, whenever I put my cursor in the #post_title textfield in my JS console, I get this error:

Uncaught TypeError: Cannot read property 'length' of undefined

Which I suspect is related to the above.

What could be causing this?

Also, I am not sure if the order of these statements in my post.js file actually matters, I changed the order for the purposes of this question - so it is more clear.

However, in my actual post.js , the order is:

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);
});

All of this feels wrong, I just don't know how to combine them and clean this up.

Thoughts?

Answer 1

Then, it is clear that body_value is undefined and that happens because $('#post_body').val() returns undefined and that can happen if #post_body doesn't exist or if it isn't a form object that has a .val() method. I think we'd have to see your HTML to advise further, but it appears that #post_body does not exist.