CODEWITHSUNDEEP
javascriptjquerynamespaces
JonoB
JonoB

Reputation: 5887

Jquery namepsace not working as expected

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

Upvotes: 0

Views: 140

Answers (4)

ShankarSangoli
ShankarSangoli

Reputation: 69915

It is because you are using zxcf variable before even defining it. You should define your namespace first and then use it. Try this.

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);

Working Demo

Upvotes: 0

Karthik Rao
Karthik Rao

Reputation: 320

Call the document.ready function after you initialize the variable, as shown below

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

Upvotes: 0

Andreas Köberle
Andreas Köberle

Reputation: 110932

Your a calling $.ready() with ready with zxcf.init(). But you deglare zxcf after this. So when you call $.ready(), zxcf is undefined, and will cause an error when you try do call a init on undefined. The problem is that you store the function in a variable instead to use a named function:

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

Or you deglare your variable before call 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);

Upvotes: 0

user1106925
user1106925

Reputation:

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().

Upvotes: 2

Related Questions