爲什麼在Ajax調用之後不會觸發jQuery事件？

Question

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

我有兩個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文件的標籤內。

欲瞭解更多信息：

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。對，但問題依然存在。我如何糾正我的問題？

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> 

PHP代碼在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

由於此功能只被從觸發的事件並不需要被放在裏面一個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); 
    } 
    } 

Answer 2

採取 '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); 
    } 
};