Javascript Module Pattern and Jquery live?

I am trying to use the JavaScript Module Pattern and I run into a problem that I am unsure how to get around.

So I have 2 script files as I want to separate my code and make it easier to read.

// script 1

var abc = (function (my, $)
{
    my.events = function ()
   {
        // selectors is from my base file(not shown as I don't think it is needed to be shown)
        // my.selectors.createFrm = '#createFrm'
        var createSubmitFrmHandler = $(my.selectors.createFrm).live('submit', function (e)
        {
            e.preventDefault();
        });

   }

   return my;

} abc || {}, jQuery));

// script 2

var abc = (function (my, $)
{
     my.dialogs = {

        addDialog: function ()
        {
            var $dialog = $('<div></div>').dialog(
            {
                width: 580,
                height: 410,
                resizable: false,
                modal: t开发者_运维百科rue,
                autoOpen: false,
                title: 'Basic Dialog',
                buttons:
                    {
                        Cancel: function ()
                        {
                            $(this).dialog('close');
                        },
                        'Create': function ()
                        {

                            jQuery.validator.unobtrusive.parse(my.selectors.createFrm)
                            // this is undefined as page loadup no form was found so live did not kick in
                            my.createSubmitFrmHandler.validate().form();

                        }
                    }
            });

            return $dialog;
        },

    return my;
} abc || {}, jQuery));

So I am not sure how to make sure that createSubmitFrmHandler is defined and continue what I am doing.

Edit

I ended up doing something like this

   var abc = (function (my, $)
    {
        my.events = function ()
       {
            // some one time events here
       }

        my.test = function() 
        {
            var add = $(selectors.createFrm).live('submit', function (e)
            {
                e.preventDefault();
            });

            return add;
        };
    }

The only thing I am unsure is that if I call up this function over and over will it keep making this object or will it look and see that the live is already bound and won't do any more binding?

---

The point of the module pattern is that Javascript has function scope: variables defined with var are local to the function in which they are defined.

(function() {
    var foo = 'bar';
    // foo == 'bar'
})();
// foo == undefined

Since you define createSubmitFrmHandler in the function which you assign to my.events, you cannot refer to it outside the body of that function. There are several ways around this. The point of passing my to all modules is that they can share secrets through it: you can set my.events.handler = createSubmitFrmHandler in the first module, and my.events.handler will be visible in the other module since my is visible there. You could have my.events() return createSubmitFrmHandler and reference it that way. If the selector is not a costly one, you can simply calculate the value of createSubmitFrmHandler again, and use $(my.selectors.createFrm).validate().form(); in the dialog module instead of trying to reference createSubmitFrmHandler. Whatever suits you.