The code below works GREAT on form page load and typing into "test_field". The number of characters left display correctly in " display_char_left"

So all is good until AFTER the form is submitted. After saving the form, ajax is used to refresh page (save data) and display form again with the same field data. Now, the countChar() is never fired again. 

How do you make the countChar function continue to execute/work AFTER saving the form, when ajax is used to refresh the page? thanks

2. <script>
3.   var maxLength = 40;
4. function countChar() {
5.   var length = $('#test_field').val().length;
6.   length = maxLength-length;
7.   jQuery('#display_char_left').text(length);
8. };
9. 
   
10.  
11. jQuery(document).ready(function($) {
12. $("#test_field").on('load', function() {
13.    countChar(); });
14. $("#test_field").on('propertychange', function() {
15.    countChar(); });
16. $("#test_field").on('keyup', function() {
17.    countChar(); });
18. $("#test_field").on('input', function() {
19.    countChar(); });
20. $("#test_field").on('paste', function() {
21.    countChar(); });
22.   
23.   countChar();
24. });
25. </script>