为啥jquery scrollable组件去掉$(document).ready()才有效

Question

$(document).ready()括起来js的话，界面点击不生效?为何

    //$(document).ready(function(){

$("#wizard").scrollable({
        onSeek: function(event,i){
                $("#status li").removeClass("active").eq(i).addClass("active");
        },
        onBeforeSeek:function(event,i){
                if(i==1){
                        var user = $("#user").val();
                        if(user==""){
                                alert("不能空");
                                return false;
                        }
                        var pass = $("#pass").val();
                        var pass1 = $("#pass1").val();
                        if(pass==""){
                            alert("密码不能空");
                                return false;
                        }
                        if(pass1 != pass){
                            alert("密码不等");
                                return false;
                        }
                }
        }
});

$("#sub").click(function(){
        var data = $("form").serialize();
        alert(data);
});

//});

Answer 1

看scrollable的原生代码，

(function ($, undefined) {
    var prefix = "jquery-scrollable____",
        emptyFn = function () {},
        defaults = {
            // 列表选择器
            listSelector: "li",

            // 容器宽度，超过隐藏
            width: "auto",

            // 容器高度，超过隐藏
            height: "auto",

            // 滚动方向
            direction: "top",

            // 每次滚动的项目数量
            // 如果为1，则每次滚动1个，暂停的时候会是某一个项目的结尾
            // 如果为0，则无缝滚动，暂停的时候可能会是某一个项目的中间
            scrollCount: 1,

            // 延迟时间
            delay: 2000,

            // 动画时间，如果滚动数量为0，则滚动全部数量的动画时间
            duration: 678,

            // 是否自动播放
            isAutoPlay: true,

            // 是否鼠标悬停暂停
            isHoverPause: true,

            // 变化之前回调
            // this => element
            onbeforechange: emptyFn,

            // 变化之后回调
            // this => element
            onafterchange: emptyFn
        };
    $.fn.scrollable = function (settings) {
        var args = arguments;
        return this.each(function () {
            var $this = $(this),
                data = $this.data(prefix),
                options = $.extend({}, defaults, $.type(settings) === 'object' && settings);

            if (!data) {
                $this.data(prefix, (data = new Scrollable($this, options)));
                data._init();
            }

            if ($.type(settings) === 'string' && Scrollable.prototype[settings]) data[settings]();
            else if ($.type(settings) === 'number') data.to.apply(data, args);
        });
    };

    $.fn.scrollable.defaults = defaults;




    // 构造函数

    function Scrollable(element, options) {
        this.$element = $(element);
        this.options = options;
    }

    Scrollable.prototype = {
        /**
         * 【私有】

这个

(function ($, undefined) {

应该是会跟$(document).ready(function(){})是冲突的。。。

呃，，我是这么理解的