bind load event to newly created jQuery object when button clicked
<p>I want to just click a button create my object which is a form but when the button fires it loads the form. My constructor could all be wrong so if you find any faults or suggestions they would be appreciated. I've commented my code where Im having trouble</p>

<pre><code>(function ($) {
        $.fn.WikiForm = function (options) {
            this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
            current = jQuery('.wikiform .wizard :first');
            var width = 0;
            function positionForm() {
                jQuery('.wikiform .wizard .view').each(function () { width += jQuery(this).width() });
                jQuery('body')
                    .css('overflow-y', 'hidden');
                jQuery('&lt;div id="overlay"&gt;&lt;/div&gt;')
                    .insertBefore('.wikiform')
                    .css('top', jQuery(document).scrollTop())
                    .animate({ 'opacity': '0.8' }, 'slow');
                jQuery('.wikiform')
                    .css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height() + 10)
                    .css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
                    .css('width', jQuery('.wikiform .wizard .view:first').width() + 10)
                    .css('left', -jQuery('.wikiform').width())
                    .css('overflow', 'hidden')
                    .animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
                jQuery('.wikiform .wizard')
                    .css('width', width)
                    .css('height', jQuery('.wikiform .wizard .view:first').height());
            }
            if (this.Mode == "Wizard") {
                return this.each(function () {
                    /* &lt;-- this function here not binding */                        
                    jQuery(this).bind('load', function (){                         
                        positionForm();
                    });
                    jQuery('.wikiform .navigation input[name^=Next]').click(function () {
                        if (current.next().length == 0) return;
                        jQuery('.wikiform .wizard').animate({ marginLeft: '-=' + current.width() + "px" }, 750, null, function () {
                            current = current.next();
                        });
                    });

                    jQuery('.wikiform .navigation input[name^=Back]').click(function () {
                        if (current.prev().length == 0) return;
                        jQuery('.wikiform .wizard').animate({ marginLeft: '+=' + current.prev().width() + 'px' }, 750, null, function () {
                            current = current.prev();
                        });
                    });
                });
            } else if (this.Mode == "CancelOk") {
                return this.each(function () {

                });
            } else {
                return this.each(function () {

                });
            }
        };
    })(jQuery);

    $(document).ready(function () {
        /*
        jQuery(window).bind("load", function () {

        });
        */
        jQuery('button[name=button1]').bind('click', function (e) {
            jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed: 750, ease: "expoinout" }); 
            /* problem here initalizing the load */
            e.preventDefault();
        });
    });
&lt;/script&gt;
&lt;style type="text/css"&gt;
    * { margin: 0; padding: 0 }
    body 
    {
        margin:0px;
    }
    #overlay 
    {
        background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
    }
    .wikiform 
    {            
        background-color:Green; position:absolute; display:block;
    }
    .wizard 
    {
        overflow:hidden;
    }
    .wizard .panel
    {

    }
    .view 
    {
        float:left;
    }
    .wizard .panel .view
    {
        float:left;
    }
    .navigation 
    {
        float:right; clear:left
    }
    #view1 
    {
        background-color:Aqua;
        width:300px;
        height:300px;

    }
    #view2
    {
        background-color:Fuchsia;
        width:400px;
        height:400px;           
    }
    #view3
    {
        background-color:Lime;
        width:300px;
        height:300px;           
    }
&lt;/style&gt;&lt;form action="" method=""&gt;
&lt;div id="layout"&gt;
    &lt;div id="header"&gt;
        Header
    &lt;/div&gt;
    &lt;div id="content" style="height:2000px"&gt;
        &lt;button id="button1" name="button1" value="1"&gt; Click Me! &lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="footer"&gt;
        Footer
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id="formView1" class="wikiform"&gt;

    &lt;div class="wizard"&gt;

        &lt;div id="view1" class="view"&gt;
            &lt;div class="form"&gt;
                Content 1
            &lt;/div&gt;        
        &lt;/div&gt;
        &lt;div id="view2" class="view"&gt;
            &lt;div class="form"&gt;
                Content 2
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="view3" class="view"&gt;
            &lt;div class="form"&gt;
                Content 3
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/div&gt;
    &lt;div class="navigation"&gt;
        &lt;input type="button" name="Back" value=" Back " /&gt;
        &lt;input type="button" name="Next " class="Next" value=" Next " /&gt;
        &lt;input type="button" name="Cancel" value="Cancel" /&gt;
    &lt;/div&gt;   
&lt;/div&gt;
</code></pre>

<p></p>
