Redactor - что-то делать с событием изменения не работает

Question

Я пытаюсь проверить, следует ли проверять кнопку отправки на событие изменения. Я попробовал обычную функцию изменения jquery, как показано ниже, а также метод обратного вызова Redactor, также ниже, но ничего не работает. Ни один из моих console.logs не стреляет.

Redactor работает на 100% без ошибок, но я добавил скомпилированный HTML тоже на всякий случай.

JS Метод

$('#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 Метод

$('#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 - с уже Redactor инициализируется, например, скопированную из исходного кода браузера

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

Answer 1

Один из способов решить это - изменить событие «change» на событие «keyup». Хотя он все еще не объясняет, почему событие изменения Redactor не работает. Если у кого-нибудь есть идеи, пожалуйста, дайте мне знать.

Answer 2

$("#message-body-field").redactor({ 
    changeCallback: function() { 
     // some code 
    } 
});