无法让我的 jQuery 插件正常工作。 TypeError: $(...).functionName 不是函数答案

【问题标题】：Having trouble getting my jQuery plugin to work. TypeError: $(...).functionName is not a function无法让我的 jQuery 插件正常工作。 TypeError: $(...).functionName 不是函数
【发布时间】：2023-03-05 09:04:01
【问题描述】：

当然，我已经有一段时间没有看到这段代码了，但我想不出我做错了什么，当我第一次构建它时它运行得很好：

// scrollio.js
(function($) {
  $.fn.scrollio = function() {
     $button = $('.scrollio');
     $button.on('click', function() {
       var scrollTo = $(this).attr('data-scroll');
       $('html, body').animate({
         scrollTop: $('#' + scrollTo).offset().top
       }, 1000);
     });
  };
})(jQuery);

// using the plugin in script.js

(function($) {
    $('.scrollio').scrollio();
})(jQuery);

文件顺序：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/scrollio.js"></script>
<script src="js/script.js"></script>

无论我做什么，我总是得到：

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

感谢您的帮助。

【问题讨论】：

对我来说很好用，你确定正在加载脚本文件吗
Works just fine for me。验证您是否以正确的顺序加载脚本。
^ 还要验证它们在正确的目录路径中
我从未听说过“scrollio”插件。你确定这是正确的，你必须说'scrollTo'
我绝对建议您将所有库（例如 jQuery 和您的插件）移动到 HTML 的 head 部分 + 将所有初始化（如在 script.js 中）移动到 document.ready 事件处理程序中。让我知道这是否能解决问题。

标签： javascript jquery plugins jquery-plugins

【解决方案1】：

我认为你需要这样初始化插件：

<script>
    $(document).ready(function(){
       $('.scrollio').scrollio();
    })
</script>

在页面底部

然后从 script.js 中删除：

(function($) {
    $('.scrollio').scrollio();
})(jQuery);

【讨论】：

具有相同的效果 - 代码可以在文档就绪事件中移动，同时保留在 script.js 文件中。这可能会有所帮助，但不能解释原始问题。
你现在可以使用你的插件了吗？
@Franco，摆脱了 TypeError，但现在插件不起作用.. OP 中的代码在 CodePen 上完美运行。
Nvm，我在“scr”中有错字哈哈。非常感谢@Franco！