Javascript 单击按钮时将加载事件绑定到新创建的jQuery对象

我只想单击一个按钮创建我的对象，它是一个表单，但当按钮启动时，它会加载表单。我的构造器可能都错了，所以如果您发现任何错误或建议，我们将不胜感激。我已经在遇到问题的地方注释了我的代码

(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('<div id="overlay"></div>')
                    .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 () {
                    /* <-- 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();
        });
    });
</script>
<style type="text/css">
    * { 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;           
    }
</style><form action="" method="">
<div id="layout">
    <div id="header">
        Header
    </div>
    <div id="content" style="height:2000px">
        <button id="button1" name="button1" value="1"> Click Me! </button>
    </div>
    <div id="footer">
        Footer
    </div>
</div>
<div id="formView1" class="wikiform">

    <div class="wizard">

        <div id="view1" class="view">
            <div class="form">
                Content 1
            </div>        
        </div>
        <div id="view2" class="view">
            <div class="form">
                Content 2
            </div>
        </div>
        <div id="view3" class="view">
            <div class="form">
                Content 3
            </div>
        </div>

    </div>
    <div class="navigation">
        <input type="button" name="Back" value=" Back " />
        <input type="button" name="Next " class="Next" value=" Next " />
        <input type="button" name="Cancel" value="Cancel" />
    </div>   
</div>

（函数（$）{
$.fn.WikiForm=函数（选项）{
this.Mode=options.Mode | | |“取消确定”| |“确定”| |“向导”；
current=jQuery（'.wikiform.wizard:first'）；
var宽度=0；
函数positionForm（）{
jQuery（'.wikiform.wizard.view'）.each（函数（）{width+=jQuery（this.width（）}）；
jQuery（'body'）
.css（'overflow-y'，'hidden'）；
jQuery（“”）
.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（'溢出'，'隐藏'）
.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（）；
}
如果（this.Mode==“向导”）{
返回此。每个（函数（）{
/*您能在初始化代码的末尾调用
positionForm（）
吗

if (this.Mode == "Wizard") {
    return this.each(function() {
        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();
            });
        });
        positionForm();
    });
}

我在这里用小提琴更新了您的代码：

编辑：要垂直居中模式对话框，请在计算垂直位置时使用
$（window.height（）
而不是
window.screen.availHeight
。有关详细信息，请参阅jQuery文档。更新的fiddle如下：

我注意到了其他一些事情：


您可以在插件代码中使用
$
而不是
jQuery
。设置插件的匿名函数使用名为
$
的参数，并将
jQuery
作为参数。我认为，这将使您的代码更具可读性
使用jQuery设置多个CSS规则时，可以使用定义多个属性的对象：
$（..）.CSS（{'width'：'10px'，'height'：'10px'}）；
例如
确保您的
有一个结尾
。在您发布的代码中，结束标记丢失
缓存常用查询（例如，
var$wikiForm=$（“.wikiForm”）
）
尽可能使用id选择器而不是类选择器
加载事件只能与与URL（）关联的元素一起使用。由于您要将该事件绑定到一个
，因此它永远不会被调用。您试图侦听的是什么事件？我需要在单击按钮时进行某种初始化，因为它没有启动。整个过程只是在启动onload事件时进行初始化。因此，我希望它在单击事件的窗体上进行定位，并将其激活你知道如何将我的表格垂直居中放置吗