'类型错误：$（...）characterCounter不是一个函数' 在我的jQuery插件

我练的jQuery插件

我创建这个插件：

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

和我的html代码：

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

但让我这个错误：

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

我不知道为什么，有人可以帮我吗？

来源

2017-05-03 Arman Spr

不知道，我有这个[的jsfiddle（https://jsfiddle.net/jsupv7qy/1/） – George

@George你的小提琴是使用jQuery 3.2.1，但OP具有工作过时的jQuery 1.10.2。在你的小提琴上更改为1.19或2.2也会产生错误 - 事实证明这是由负载顺序引起的 - 将文档移动到js并且它再次正常工作。 https://jsfiddle.net/jsupv7qy/2/ –

它看起来像是因为您的文档已准备好在脚本之前运行。 OP中的代码看起来像正确的顺序 - 你能确认你的实际代码是否也是这个顺序吗？ –

(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>

请检查一下，你有一个jQuery的依赖性，因此你需要添加的jQuery这一点。而我使用了通用类因此，它将适用于所有类型的输入字段。

感谢

来源

2017-05-03 09:27:09

我不知道为什么不适合我 –

这与OP中的代码有何不同？ –

它给* .characterCounter未定义的事实证实$（document）.ready *正在运行，所以jquery已经可用。 –

'类型错误：$（...）characterCounter不是一个函数' 在我的jQuery插件

回答

相关问题