Question

I have inherited a jquery component that simulates a dropdown for users to choose an option from.

The component can be seen at http://jsfiddle.net/Qg9f4/2/ and it seems to work fine.

However, we are trying to namespace all of our scripts into a single file. In general, this works fine as per this thread. However, this component stops working when we use the same technique for namespacing. The init script seems to parse fine on $(document).ready, but nothing actually happens when the component is clicked.

I have commented in the jsfiddle as to what does and does not work.

This works

$(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();
    });
});

This doesnt work

$(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

You’re using the zxcf variable before you’ve initialized it.

This means that the ready() handler will be invoked right away, and so the zxcf is not yet intialized.

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/

Also, you’re invoking the function instead of passing it to .ready().