为什么在 Ajax 调用后不触发 jQuery 事件？

Question

这可能是重复的，但这些答案对我不起作用

我有两个 jQuery 事件处理程序。

第一个用于根据第一个下拉列表中选择的选项动态填充第二个下拉列表。

第二个是动态计算要在文本区域中键入的单词数。

这两个事件在单独使用时都会像我预期的那样被触发。 当我将这两者结合在一起时，下拉人口事件工作正常，但单词计算器没有任何反应。

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

有 main.js 文件，我在其中插入了dynamic_word_counter函数。 以上内容已放在同一 HTML 文件的<script>标记内。

了解更多信息：

main.js 文件

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



}
});

我正在使用 jQuery .on ，但问题仍然存在。 如何纠正我的问题？

P:S HTML 部分

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

ajax 中使用的 PHP 代码

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

将“dynamic_word_counter”定义从函数外壳中取出。 所以这是可以访问的。
或者
将其设置在“窗口”对象上。 即在 main.js 文件中，

改变

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



}
});

至

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

因为这个函数只是从一个事件中触发的，所以它不需要放在 document.ready 函数中。 您可以将它放在（yuck）全局上下文中，然后触发并将事件侦听器放置在范围内的 document.ready 将可以访问该函数 - 与放置一个永远不会在文档中触发的函数无关.ready 函数。

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