Having trouble getting my jQuery plugin to work. TypeError: $(...).functionName is not a function

Question

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

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

感谢您的帮助。

Answer 1

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

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

并且在您页面的底部

并从 script.js 中删除：

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

Having trouble getting my jQuery plugin to work. TypeError: $(...).functionName is not a function

Having trouble getting my jQuery plugin to work. TypeError: $(...).functionName is not a function

javascript

jquery

plugins

jquery-plugins