'類型錯誤：$（...）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插件

回答

相關問題