Question

我继承了一个jquery组件，它模拟用户从中选择一个选项的下拉列表。

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

但是，我们正在尝试将所有脚本命名为单个文件。一般来说，这可以正常工作this thread。但是，当我们对命名空间使用相同的技术时，此组件将停止工作。 init脚本似乎在$（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变量。

这意味着将立即调用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()。

Answer 2

这是因为您在定义之前使用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 3

初始化变量后调用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 4

您的来电$.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);

Jquery命名空间无法按预期工作

4 个答案: