[SOLVED] Redactor - do something on change event not working

I am trying to check whether or not to validate a submit button on a change event. I have tried a normal jquery change function as below, and also the Redactor callback method, also below but nothing is working. None of my console.logs are firing.

The redactor is working 100% with no error but I added the compiled HTML too just in case.

JS Method

$('#compose-message .redactor-editor').on('change', function(){
  var messageLength = $('#compose-message .redactor-editor').text().length;
  var formtagLength = $('.compose-wrap .available-friends-wrap').find('.fa-check').length;

  console.log('messageLength = ' + messageLength);
  console.log('formtagLength = ' + formtagLength);

  if ( messageLength > 1 && formtagLength > 0) {
    // enable button
    $('#compose-message .action-btn').removeClass('disabled').attr('disabled', false);
  } else{
    // disable button
    $('#compose-message .action-btn').addClass('disabled').attr('disabled', true);
  }
});

Redactor Method

$('#message-body-field').redactor({
callbacks: {
    change: function()
    {
      var messageLength = $('#compose-message .redactor-editor').text().length;
      var formtagLength = $('.compose-wrap .available-friends-wrap').find('.fa-check').length;

      console.log('messageLength = ' + messageLength);
      console.log('formtagLength = ' + formtagLength);

      if ( messageLength > 1 && formtagLength > 0) {
        // enable button
        $('#compose-message .action-btn').removeClass('disabled').attr('disabled', false);
      } else{
        // disable button
        $('#compose-message .action-btn').addClass('disabled').attr('disabled', true);
      }
    }
}   
});

HTML - with redactor already initialise eg copied from the browser source code

<form id="compose-message">
  <div class="form-group choose-recipients">
    <label for="message-recipient-field pull-left">Send to:</label>
    <div class="available-friends-wrap overflow-x">
      <span class="form-tag">Csanad Novak <i class="fa fa-plus"></i></span> <span class="form-tag">Tony Stark  <i class="fa fa-plus"></i></span> <span class="form-tag">Yan Lin <i class="fa fa-plus"></i></span> <span class="form-tag">Sean Xu <i class="fa fa-plus"></i></span> <span class="form-tag">AJ Hunt <i class="fa fa-plus"></i></span> <span class="form-tag">Alley Express <i class="fa fa-plus"></i></span>
    </div>
  </div>
  <div class="form-group">
    <label for="message-body-field">Add your message</label>
    <div class="redactor-box" role="application"><ul class="redactor-toolbar" id="redactor-toolbar-0" role="toolbar" style="position: relative; width: auto; top: 0px; left: 0px; visibility: visible;"><li><a href="#" class="re-icon re-html" rel="html" role="button" aria-label="HTML" tabindex="-1"></a></li><li><a href="#" class="re-icon re-formatting redactor-toolbar-link-dropdown" rel="formatting" role="button" aria-label="Formatting" tabindex="-1" aria-haspopup="true"></a></li><li><a href="#" class="re-icon re-bold" rel="bold" role="button" aria-label="Bold" tabindex="-1"></a></li><li><a href="#" class="re-icon re-italic" rel="italic" role="button" aria-label="Italic" tabindex="-1"></a></li><li><a href="#" class="re-icon re-deleted" rel="deleted" role="button" aria-label="Deleted" tabindex="-1"></a></li><li><a href="#" class="re-icon re-unorderedlist" rel="unorderedlist" role="button" aria-label="&amp;bull; Unordered List" tabindex="-1"></a></li><li><a href="#" class="re-icon re-orderedlist" rel="orderedlist" role="button" aria-label="1. Ordered List" tabindex="-1"></a></li><li><a href="#" class="re-icon re-outdent" rel="outdent" role="button" aria-label="< Outdent" tabindex="-1"></a></li><li><a href="#" class="re-icon re-indent" rel="indent" role="button" aria-label="> Indent" tabindex="-1"></a></li><li><a href="#" class="re-icon re-link redactor-toolbar-link-dropdown" rel="link" role="button" aria-label="Link" tabindex="-1" aria-haspopup="true"></a></li><li><a href="#" class="re-icon re-alignment redactor-toolbar-link-dropdown" rel="alignment" role="button" aria-label="Alignment" tabindex="-1" aria-haspopup="true"></a></li><li><a href="#" class="re-icon re-horizontalrule" rel="horizontalrule" role="button" aria-label="Insert Horizontal Rule" tabindex="-1"></a></li></ul><div class="redactor-editor" contenteditable="true" dir="ltr"><p>&#8203;</p></div><textarea class="form-control" id="message-body-field" rows="3" required="" dir="ltr" style="display: none;"></textarea></div>
    <div class="help-block with-errors"></div>
  </div>
  <div class="text-right">
    <button type="submit" class="btn action-btn disabled" disabled="">Submit</button>
  </div>
</form>