jQuery字符计数在phtml foreach循环中不起作用

Question

我无法在foreach循环中使用字符计数 - 请参阅下面的phtml文件。

字符计数在div data-bind =“foreach：task”循环之外工作，但是当我包含循环时，它会加载 - 但不会从该点开始运行。

这是我的代码：

<div class="row">
    <div class="span18">
        <h2 class="PIMS3">Task Details</h2>
        <div id="taskList">
            <div class="row">
                <div class="span1">Dept</div>
                <div class="span1">Skill</div>
                <div class="span3">Description</div>
                <div class="span3">Notes</div>
                <div class="span6">Budget</div>
            </div>

            <script type="text/javascript">

                    $(document).ready(function(){
                        $("#textAreaDescriptions").keyup(function() {
                            var CharacterNo1 = $(this).val().length;
                            $("#CharacterCount1").html ("Characters Used:50 : " + CharacterNo1);
                        });
                    });

                    $(document).ready(function(){
                        $('#textAreaNote').keyup(function () {
                            var CharacterNo2 = $(this).val().length;
                            $('#CharacterCount2').html("Characters Used:150 : " + CharacterNo2);
                        });
                 })(jQuery);
            </script>

            <div data-bind="foreach: tasks">

                 <div class="row">
                     <div class="span1"><select class="span1" data-bind="options: $parent.departmentList, value: department"></select></div>

                     <div class="span1"><select class="span1" data-bind="options: skillList, value: skill"></select></div>

                     <div class="span3"><input class="span3" name = "description" id="textAreaDescriptions"  data-bind="value: description"  placeholder="Max Character Limit 50" maxlength="50" >
                         <div id="CharacterCount1" style="padding: 4px; float: left; font-size: 12px; text-align: left;">Character Count:50:0</div>
                     </div>

                     <div class="span3"><input class="span3" name = "notes" id="textAreaNote"  data-bind="value: notes" placeholder="Max Character Limit 150" maxlength= "150">
                         <div id="CharacterCount2" style="padding: 4px; float: left; font-size: 12px; text-align: left;">Character Count:150:0</div>
                     </div>
                     <div class="span2" data-bind=" visible: skill() != 'RES' ">Hours: <input class="span1" placeholder="Hours" data-bind="value: budget_hours"</input></div>
                     <div class="span2" data-bind=" visible: skill() != 'RES' ">Cost Rate: <input class="span1" placeholder="Cost Rate" data-bind="value: budget_cost_rate"</input></div>
                     <div class="span2" data-bind=" visible: skill() != 'RES' ">Charge Rate: <input class="span1" placeholder="Charge Rate" data-bind="value: budget_charge_rate "</input></div>

                     <div class="span2" data-bind="visible: skill() == 'RES'">Other Cost: <input class="span1" placeholder="Other Cost" data-bind="value: budget_other_cost"</input></div>
                     <div class="span2" data-bind="visible: skill() == 'RES'">Other Charge: <input class="span1" placeholder="Other Charge" data-bind="value: budget_other_charge"</input></div>
                 </div>
             </div>


        </div>

我将不胜感激任何帮助！我把头发拉出来了!!

非常感谢，

克里斯