我的jquery插件中的“ TypeError：$（…）.characterCounter不是函数”

Question

I am practicing the jQuery plugin

i create this plugin :

(function ($) {
    'use strict';
    $.fn.characterCounter = function () {
        return this.each(function (index, item) {
            $(item).keyup(function updateCharCounter() {
                var $me = $(this),
                    maxLength = parseInt($me.attr('maxlength'), 10),
                    charCount = $me.val().length,
                    $counter = $me.siblings('.limit');

                $counter.text('limit: ' + maxLength + ' characters. remaining: ' + (maxLength - charCount));
            });
        });
    };

})(jQuery);

and my html code :

<div class="form-group">
    <textarea id="short-message" maxlength="100" cols="8"></textarea>
    <p class="limit">limit: 100 characters</p>
</div>

<div class="form-group">
    <textarea id="short-shory" maxlength="150" cols="8"></textarea>
    <p class="limit">limit: 150 characters</p>
</div>

<div class="form-group">
    <input id="nickname" maxlength="50" size="32"/>
    <p class="limit">limit: 50 characters</p>
</div>


<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/showCharacterCharlimit.js"></script>

<script>
    $(document)
        .ready(function() {
            'use strict';
            $('textarea').characterCounter();
        });

</script>

but get me this error :

TypeError: $(...).characterCounter is not a function

i don't know why, could anybody help me ?

Answer 1

 (function ($) { 'use strict'; $.fn.characterCounter = function () { return this.each(function (index, item) { $(item).keyup(function updateCharCounter() { var $me = $(this), maxLength = parseInt($me.attr('maxlength'), 10), charCount = $me.val().length, $counter = $me.siblings('.limit'); $counter.text('limit: ' + maxLength + ' characters. remaining: ' + (maxLength - charCount)); }); }); }; })(jQuery); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <textarea id="short-message" class="wordcount" maxlength="100" cols="8"></textarea> <p class="limit">limit: 100 characters</p> </div> <div class="form-group"> <textarea id="short-shory" class="wordcount" maxlength="150" cols="8"></textarea> <p class="limit">limit: 150 characters</p> </div> <div class="form-group"> <input id="nickname" class="wordcount" maxlength="50" size="32"/> <p class="limit">limit: 50 characters</p> </div> <script> $(document) .ready(function() { 'use strict'; $('.wordcount').characterCounter(); }); </script> 

Please check , you have a jquery dependency So you need to add jquery for this. And I used a Common Class So that it will work for all type of input fields.

Thanks