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 .on，但问题仍然存在。我如何纠正我的问题？

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

采取＆＃39; dynamic_word_counter＆＃39;定义了功能外壳。所以这是可以访问的要么
将其设置在＆＃39;窗口＆＃39;宾语。即在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);
    }
  }

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

2 个答案: