Question

I have the following code:

 var $form = '',
    $modal = '',
    $submits = ''; 

 function createModal() {
        $modal = $.modal({
            title: title,
            closeButton: true,
            content: content,
            resizeOnLoad: true
        });
        $form = $modal.find('.form');
        $message = $modal.find('.message');
        $submits = $modal.find('.submit-button');
        href = $form.attr('data-href');
    }

Is there some way that I could add $form, $message and $submits to the $modal object as they are all related.

Answer 1

To associate data to a jQuery object, you may use the data function :

The jQuery.data() method allows us to attach data of any type to DOM
elements in a way that is safe from circular references and therefore
free from memory leaks. jQuery ensures that the data is removed when
DOM elements are removed via jQuery methods, and when the user leaves
the page. We can set several distinct values for a single element and
retrieve them later:

• jQuery.data(document.body, ‘foo’, 52);
• jQuery.data(document.body, ‘bar’, ‘test’);

You usually need this because simply associate some properties to a jQuery object wouldn’t allow you to get the data back from another object wrapping the same element.

In your case, if you keep a reference to your object, you may simply do

 function createModal() {
    var $modal = $.modal({
        title: title,
        closeButton: true,
        content: content,
        resizeOnLoad: true
    });
    return {
        $modal   : $modal,
        $form    : $modal.find('.form'),
        $message : $modal.find('.message'),
        $submits : $modal.find('.submit-button'),
        href     : $form.attr('data-href')
    };
}

var modal = createModal();

So you keep only one clean reference to the whole thing and you may access modal.$modal or modal.$form.