Why don't jQuery selector variables work within namespaces?

Question

I am stumped on why this is not working. I'm looking to having more than one variable declared. What am I doing wrong?

     var message = (function ($) {
        var $modalBody = $('.modal-body'),
            $lblToUser = $modalBody.find('.to-user');
        return {
            toUser: function () {
                $lblToUser.val('To');
                $lblToUser.focus(function () {
                    if (this.value === 'To') this.value = '';
                    $(this).addClass('darker');
                }).blur(function () {
                    if (this.value === '') this.value = 'To';
                    $(this).removeClass('darker');
                });
            },
        };
    })(jQuery);

message.toUser();

@user952851: Executes fine for me: http://jsfiddle.net/eMSbe/ — Matt Burland, Jan 11 '13 at 19:21

score 2 · Answer 1 · answered Jan 11 '13 at 19:19

Maybe you need to initialize the document first?

$( document ).ready( function () {       // <-------
     var message = (function ($) {
        var $modalBody = $('.modal-body'),
            $lblToUser = $modalBody.find('.to-user');
        return {
            toUser: function () {
                $lblToUser.val('To');
                $lblToUser.focus(function () {
                    if (this.value === 'To') this.value = '';
                    $(this).addClass('darker');
                }).blur(function () {
                    if (this.value === '') this.value = 'To';
                    $(this).removeClass('darker');
                });
            },
        };
    })(jQuery);

    message.toUser();
});

score 1 · Accepted Answer · answered Jan 11 '13 at 19:19

1

It seems you have a misplaced , at the end of toUser that may cause issues.

 var message = (function ($) {
    var $modalBody = $('.modal-body'),
        $lblToUser = $modalBody.find('.to-user');
    return {
        toUser: function () {
            $lblToUser.val('To');
            $lblToUser.focus(function () {
                if (this.value === 'To') this.value = '';
                $(this).addClass('darker');
            }).blur(function () {
                if (this.value === '') this.value = 'To';
                $(this).removeClass('darker');
            });
        }, // <-----
    };
})(jQuery);

message.toUser();

answered Jan 11 '13 at 19:19

Chase

29,019
1
49
48

1

This still won't work on multiple correctly because it's selecting the same elements each time due to `var $modalBody = $('.modal-body'),$lblToUser = $modalBody.find('.to-user');` – Kevin B Jan 11 '13 at 19:20
My problem was adding "message.toUser()" within another namespace. – Davis Jan 11 '13 at 19:34
@user952851: So this answer's solution did not solve the problem? Why did you accept it then? This is just confusing. Don't select an answer just for the sake of it. You can provide your own answer after a given time and provide your solution, or flag to close the question, or delete it altogether. – Felix Kling Jan 11 '13 at 20:25

Why don't jQuery selector variables work within namespaces?

2 Answers2