Question

我创建了一个字符计数函数，用于计算使用的字符长度，并在每个键上显示它们。它在循环中运行良好但是当我将它添加到每个循环以添加新行时它不起作用。

下面的代码显示了循环中的所有内容，注释和描述部分是包含字符数的类：

<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>
             <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="char_namb2" 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="char_namb3" 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>
            <div class="row">
                <div class="span2 offset1">
                    <a class="btn btn-success" data-bind="click: addTask"><i class="icon-plus icon-white"></i> Add Task</a>
                </div>
            </div>

            <div class="row">&nbsp;</div>

            <div class="row">
                <div class="span2 offset1">
                    <a class="btn btn-primary" data-bind="click: save,visible: isValid() && !isSubmitting() "><i class="icon-ok icon-white"></i> Create Job</a>
                    <a class="btn btn-info" data-bind="click: save,visible: isSubmitting"><i class="icon-ok icon-white"></i> Saving ... ...</a>
                </div>
            </div>  
        </div>
    </div>
</div>

此代码段包含字符计数功能的脚本，该脚本位于循环外部。

<script>

$(function(){
    $('#textAreaDescriptions').keyup(function(){
        var charsno2 = new $(this).val().length;
        $('#char_namb2').html("Character Count:50 : " + charsno2);
    });
});

<script>
$(function(){
    $('#textAreaNote').keyup(function(){
        var charsno3 = $(this).val().length;
        $('#char_namb3').html("Character Count:150 : " + charsno3);
    });
});

有人知道我怎么能让它发挥作用吗？

谢谢！

Answer 1

尽管您使用的是Javascript而不是PHP，但请尝试将您的功能放在

中

$( document ).ready()

我认为你在DOM加载之前将事件绑定到输入

**** ****编辑

我认为您的代码存在一些问题。请查看此链接https://jsfiddle.net/ivan0013/fmu9bj35/1/您正在使用的示例。

在foreach循环中添加字符计数功能

1 个答案: