Jquery 命名空间未按预期工作

Question

我继承了一个 jquery 组件，它模拟一个下拉菜单供用户选择。

可以在http://jsfiddle.net/Qg9f4/2/ 看到该组件，它似乎工作正常。

但是，我们正在尝试将所有脚本命名为单个文件。一般来说，根据this thread，这可以正常工作。但是，当我们使用相同的命名空间技术时，该组件将停止工作。初始化脚本似乎在 $(document).ready 上解析得很好，但是当组件被点击时实际上什么都没有发生。

我已经在 jsfiddle 中评论了哪些功能有效，哪些无效。

这行得通

$(document).ready(function () {

    $(".dselector dt a").click(function () {
        $(".dselector dd ul").toggle();
    });

    $(".dselector dd ul li a").click(function () {
        $(".dselector dd ul").hide();
    });

    $(document).bind('click', function (e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide();
    });
});

这不起作用

$(document).ready(zxcf.init());

var zxcf = {
    init: function() {
        $(".dselector dt a").click(function () {
            $(".dselector dd ul").toggle();
        });

        $(".dselector dd ul li a").click(function () {
            $(".dselector dd ul").hide();
        });

        $(document).bind('click', function (e) {
            var $clicked = $(e.target);
            if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide();
        });
    }
};

Answer 1

这是因为你在定义它之前就使用了zxcf 变量。您应该先定义命名空间，然后再使用它。试试这个。

var zxcf = {
    init: function() {
        $(".dselector dt a").click(function () {
            $(".dselector dd ul").toggle();
        });

        $(".dselector dd ul li a").click(function () {
            $(".dselector dd ul").hide();
        });

        $(document).bind('click', function (e) {
            var $clicked = $(e.target);
            if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide();
        });
    }
};
$(document).ready(zxcf.init);

工作Demo

Answer 2

初始化变量后调用document.ready函数，如下图

var zxcf = {
init: function() {
    $(".dselector dt a").click(function () {
        $(".dselector dd ul").toggle();
    });

    $(".dselector dd ul li a").click(function () {
        $(".dselector dd ul").hide();
    });

    $(document).bind('click', function (e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide();
    });
}
};

$(document).ready(function(){zxcf.init()});

Answer 3

您的电话$.ready() 已准备好与zxcf.init()。但是你在这之后不看zxcf。所以当你调用$.ready() 时，zxcf 是未定义的，当你尝试调用未定义的init 时会导致错误。问题是您将函数存储在变量中而不是使用命名函数：

$(document).ready(zxcf.init);

function zxcf () {
    this.init= function() {
        $(".dselector dt a").click(function () {
            $(".dselector dd ul").toggle();
        });

        $(".dselector dd ul li a").click(function () {
            $(".dselector dd ul").hide();
        });

        $(document).bind('click', function (e) {
            var $clicked = $(e.target);
            if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide();
        });
    }
};

或者你在调用ready之前取消你的变量：

var zxcf = {
    init: function() {
        $(".dselector dt a").click(function () {
            $(".dselector dd ul").toggle();
        });

        $(".dselector dd ul li a").click(function () {
            $(".dselector dd ul").hide();
        });

        $(document).bind('click', function (e) {
            var $clicked = $(e.target);
            if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide();
        });
    }
};

$(document).ready(zxcf.init);

Answer 4

您在初始化之前使用了zxcf 变量。

这意味着ready() 处理程序将立即被调用，因此zxcf 尚未初始化。

http://jsfiddle.net/UtSmC/

var zxcf = {
    init: function() {
        $(".dselector dt a").click(function () {
            $(".dselector dd ul").toggle();
        });

        $(".dselector dd ul li a").click(function () {
            $(".dselector dd ul").hide();
        });

        $(document).bind('click', function (e) {
            var $clicked = $(e.target);
            if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide();
        });
    }
};

$(document).ready(zxcf.init); // <-- pass it instead of invoking it

http://jsfiddle.net/UtSmC/

另外，您调用函数而不是将其传递给.ready()。