为foreach循环添加字符计数函数

Add character count function to foreach loop

本文关键字:函数 字符 添加 foreach 循环      更新时间:2023-09-26

我创建了一个字符计数函数,该函数计算使用的字符长度并在每个键up处显示它们。它在循环外工作得很好,但当我将它添加到每个循环之前添加新行时,它不工作。

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

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

有谁知道我怎么才能让这个工作吗?

谢谢!

尽管您使用的是Javascript而不是PHP,但请尝试将您的函数放入

$( document ).ready()

我认为你是在DOM加载

之前将事件绑定到输入

* * * * * * * *编辑

我认为你的代码有几个问题。查看此链接https://jsfiddle.net/ivan0013/fmu9bj35/1/,其中您有一个示例工作。