Пространство имен Jquery не работает должным образом

Question

Я унаследовал компонент jquery, который имитирует выпадающий список для выбора пользователем опции.

Компонент можно увидеть на http://jsfiddle.net/Qg9f4/2/, и, похоже, он работает нормально.

Однако мы пытаемся поместить все наши сценарии в один файл.В общем, это прекрасно работает согласно этой теме .Однако этот компонент перестает работать, когда мы используем ту же технику для пространства имен.Сценарий инициализации, кажется, хорошо разбирается в $ (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

Ваш звонок $.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 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

Это потому, что вы используете переменную 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);

Работа Демо