Why does not a jQuery event gets fired after an Ajax call?

Question

This is a possible duplicate, but those answers did not work for me

I have two jQuery event handlers.

The first one is used to dynamically populating second dropdown based on the option selected in the the first dropdown.

The second one is for dynamically calculating number of words left to type in a text area.

Both these events get fired as I expected when they are used individually. When I combine these two together, dropdown population event works fine, but nothing happens in the word calculator.

  $(function(){ // document is ready

              //This is calculating no of words
              $("#description").on("keyup",function(){
                 dynamic_word_counter($(this),255);
              });
              

              //This will populate second dropdown based on first one
                  $("#branch_id").on("change",function(){
                     var val=$("#branch_id").val();  
                     $.ajax({
                        type: "GET",
                        url: "loan_request_assign.php", //same file
                        data: "branch_id=" + val, //get value of first dropdwon
                        success: function(html) {

                            $("#staff_name").html(html);//insert options to second dropdown
                            //console.log(html);
                        } 
                         
                         
                     });
                    
                    
                }); 
                
         });

There is main.js file and I inserted dynamic_word_counter function in it. Above contents have been put inside of <script> tags of the same HTML file.

For more information:

main.js file

$(function(){
    function dynamic_word_counter(element, limit) {
    //source:-http://spyrestudios.com/building-a-live-textarea-character-count- limit-with-css3-and-jquery/
    var text = $(element).val();
    var text_length = $(element).val().length;
    if (text_length > limit) {
        $(element).val(text.substr(0, limit));
        $("#message").html(0);
    } else {
        $("#message").html(limit - text_length);
    }



}
});

I am using jQuery .on, but the problem still exists. How do I rectify my issue?

P:S HTML part

<form id="branchform" action="loan_request_assign.php"  method="POST" class="form">
     <div class="formBlock"> 
                    <label for="branch_name">Branch Name<span class="required">*</span></label>
                    <select id="branch_id" name="branch_name" class="textInput">  
                     //User will select a branch name
                        <option value="">Select</option>
                        <?php
                        $branches = Branch::find_by_sql("SELECT * FROM branch");                    
                        foreach ($branches as $branch) {
                            echo "<option value='$branch->id' ";
                            if (isset($_POST["branch_name"]) && $_POST["branch_name"] == $branch->id)
                                echo "selected ";
                            echo ">$branch->branch_name</option>";
                        }
                        ?>
                    </select>
                </div> 
                
        
                
                 <div class="formBlock">
                        <label for="staff_name">Staff Name <span class="required">*</span></label> 
                        <select id="staff_name" name="staff_name" class="textInput" >
                            <option value="">Select</option>
                            
                            <!--dynamically populating staff names using ajax (based on `branch name)-->`
                        </select>
                </div>
                
                <div class="formBlock">
                    <label for="your_comments" class="label">Description</label>
                    <p class="message"><span id="message">255</span><span> characters left</span></p>
                    <textarea id="description" placeholder="Description must be less than 255 characters" name="description" class="textArea"><?php echo isset($_POST["description"])?$_POST["description"]:NULL;?></textarea>
                </div>
</form>

PHP code used in ajax

<?php
if(isset($_GET["branch_id"])){
    $branch_id=$_GET["branch_id"];
    $sql="SELECT id,staff_firstname,staff_lastname FROM staff ";
    $sql.="WHERE branch_id =$branch_id";            
    $staff_names=  Staff::find_by_sql($sql);
    if(!empty($staff_names)){
         foreach ($staff_names as $staff_name) {
        echo "<option value='$staff_name->id'>".$staff_name->staff_firstname." ".$staff_name->staff_lastname."</option";       
           
    }
    }else{
        echo "<option value=''>No Staff Found</option>";
    }   
       
    
}
?>

Answer 1

Take ' dynamic_word_counter' definition out of function enclosure. So that is is accessible.
Or
Set it on 'window' object. i.e. in main.js file,

change

$(function(){
    function dynamic_word_counter(element, limit) {
    //source:-http://spyrestudios.com/building-a-live-textarea-character-count- limit-with-css3-and-jquery/
    var text = $(element).val();
    var text_length = $(element).val().length;
    if (text_length > limit) {
        $(element).val(text.substr(0, limit));
        $("#message").html(0);
    } else {
        $("#message").html(limit - text_length);
    }



}
});

to

window.dynamic_word_counter = function (element,limit) {
//source:-http://spyrestudios.com/building-a-live-textarea-character-count- limit-with-css3-and-jquery/
    var text = $(element).val();
    var text_length = $(element).val().length;
    if (text_length > limit) {
        $(element).val(text.substr(0, limit));
        $("#message").html(0);
    } else {
        $("#message").html(limit - text_length);
    }
};

Answer 2

As this function is only being fired from an event it doesn't need to be placed inside a document.ready function. You can place it on the (yuck) global context and then the document.ready that is fired and places the event listeners on the scope will then have access to the function - its irrelevant to place a function that will never get fired in a document.ready function.

  function dynamic_word_counter(element, limit) {
    //source:-http://spyrestudios.com/building-a-live-textarea-character-count- limit-with-css3-and-jquery/
    var text = $(element).val();
    var text_length = $(element).val().length;
    if (text_length > limit) {
        $(element).val(text.substr(0, limit));
        $("#message").html(0);
    } else {
        $("#message").html(limit - text_length);
    }
  }