Javascript 页面加载时为何启动回调函数：jQuery插件开发

我正在尝试制作一个jquery模式插件，但不明白为什么我的回调函数会在页面加载时启动？我需要在打开弹出窗口前启动两个函数，在弹出窗口打开后启动两个函数，不是在页面加载时启动，而是在页面加载时启动。代码有什么问题。我在谷歌上搜索了一整天还是没找到。也不适合我

这是我的密码

<script>
$(document).ready(function (e) {
    $(".selector").coolBox({
        OverlayClose: false,
        complete : function(){//this should called when my plugin finished its work
            console.log("complete");
        },
        beforeStart: function(){
            console.log("before Start");
        }
    });    
})
</script>

$（文档）.ready（函数（e）{
$（“.selector”）.coolBox({
套圈：错，
complete:function（）{//当我的插件完成工作时应该调用它
控制台日志（“完成”）；
},
beforeStart:function（）{
控制台日志（“启动前”）；
}
});    
})

编辑：这里是完整的插件代码

 ;(function ($, window) {

$.coolBox = function (options) {

}
$.coolBox.closeCoolBox = function () {
    console.log("closeCoolBox closes");
    $("#clBoxOverlay,#clBoxOuterWrapper").remove();
};

$.coolBox.openCoolBox = function (options) {
    console.log("closeCoolBox opens");
    $("#inlineOverlayCloseDisabled").trigger("click");
    //$.fn.coolBox(options);
    $(this).each(function () {
        console.log($(this));
    })
};

  $.fn.coolBox = function (options) {
    console.log("calls to opens");
    var settings = {
        complete: false,
        beforeStart: false,
        Background: "#333",
        Opacity: "0.8",
        Padding: "10px",
        Height: "auto",
        Width: "auto",
        OverlayClose: true,
        EscClose: true,
        Zindex: "99991",
        Border: "2px",
        BorderColor: "black",
        PopUp: "fixed"
    };

    var o = {};
    $.extend(o, settings, options);

    //is this not for event handling before starting my plugin to change DOM?
    if (typeof o.beforeStart == 'function') {
        o.beforeStart.call(this); // brings the scope to the callback
    }
    return this.each(function () {
        var link = $(this);

        link.click(function (event) {
            var clBox = document.createElement('div');
            clBox.setAttribute("id", "clBoxWrapper");
            document.body.appendChild(clBox);

            $clBoxWrapper = $("#clBoxWrapper");
            $clBoxWrapper.wrap($("<div id='clBoxOuterWrapper'></div>"));
            oBox = document.getElementById("clBoxOuterWrapper");
            oBox.style.width = o.Width;
            oBox.style.height = o.Height;

            if (o.PopUp == "fixed") {
                oBox.style.position = "fixed";
            } else {
                oBox.style.position = "absolute";
            }
            oBox.style.zIndex = o.Zindex + 1;
            var olBox = document.createElement('div');
            olBox.setAttribute("id", "clBoxOverlay");
            olBox.style.width = "100%";
            olBox.style.height = "100%";
            olBox.style.position = "fixed";
            olBox.style.zIndex = o.Zindex;
            olBox.style.opacity = o.Opacity;
            olBox.style.backgroundColor = o.Background;
            olBox.style.top = "0px";
            olBox.style.left = "0px";

            document.body.appendChild(olBox);

            $wrapContent = link.attr("href");
            //alert($wrapContent);
            if ($wrapContent.indexOf("#") == 0) {
                $wrapContainer = $($wrapContent).html();
                //alert($wrapContainer);

                $oBoxWrapper = $("#clBoxOuterWrapper");
                $clBoxOverlay = $("#clBoxOverlay");
                $clBoxOverlay.css({
                    "height": $(document).innerHeight(),
                    "width": $(document).innerWidth(),
                });

                if ($oBoxWrapper.length) {
                    $clBoxWrapper.html($wrapContainer);

                    if (o.PopUp == "fixed") {
                        $oBoxWrapper.css({"maxHeight": $(window).height()});
                        if ($oBoxWrapper.innerHeight() >= $(window).height()) {
                            $oBoxWrapper.css("overflowY", "scroll");
                        }
                        if ($oBoxWrapper.innerWidth() >= $(window).width()) {
                            $oBoxWrapper.css("overflowX", "scroll");
                        }
                    }

                    $oBoxWrapper.css({
                        "left": ($(window).width() - $oBoxWrapper.innerWidth()) / 2,
                        "top": ($(window).height() - $oBoxWrapper.innerHeight()) / 2
                    });
                }
            }
               event.preventDefault();
        });

   //is this not event handling code after my plugin finished it task?
        if (typeof o.complete == 'function') {
            o.complete.call(this); // brings the scope to the callback
        }
    });        
}
})(jQuery, window)

；（函数（$，窗口）{
$.coolBox=功能（选项）{
}
$.coolBox.closeCoolBox=函数（）{
console.log（“closeCoolBox关闭”）；
$（“#clBoxOverlay，#clboxOuterRapper”）.remove（）；
};
$.coolBox.openCoolBox=函数（选项）{
console.log（“closeCoolBox打开”）；
$（“#INLINEOVERCYCLOSEDISABLED”）。触发器（“单击”）；
//$.fn.coolBox（可选）；
$（此）。每个（函数（）{
log（$（this））；
})
};
$.fn.coolBox=功能（选项）{
log（“打开的调用”）；
变量设置={
完成：错误，
beforeStart:false，
背景：“333”，
不透明度：“0.8”，
填充：“10px”，
高度：“自动”，
宽度：“自动”，
是的，
埃斯克洛斯：是的，
Zindex：“99991”，
边框：“2px”，
边框颜色：“黑色”，
弹出：“修复”
};
var o={}；
$.extend（o、设置、选项）；
//在启动插件更改DOM之前，这不是用于事件处理吗？
if（o.beforeStart的类型=='function'）{
o、 beforeStart.call（this）；//将范围带到回调
}
返回此。每个（函数（）{
var-link=$（这个）；
链接。单击（功能（事件）{
var clBox=document.createElement（'div'）；
setAttribute（“id”、“clBoxWrapper”）；
document.body.appendChild（clBox）；
$clBoxWrapper=$（“#clBoxWrapper”）；
$clBoxWrapper.wrap（$（“”））；
oBox=document.getElementById（“clboxOuterRapper”）；
oBox.style.width=o.宽度；
oBox.style.height=o.高度；
如果（o.PopUp==“固定”）{
oBox.style.position=“固定”；
}否则{
oBox.style.position=“绝对”；
}
oBox.style.zIndex=o.zIndex+1；
var olBox=document.createElement（'div'）；
setAttribute（“id”、“clBoxOverlay”）；
olBox.style.width=“100%”；
olBox.style.height=“100%”；
olBox.style.position=“固定”；
olBox.style.zIndex=o.zIndex；
olBox.style.opacity=o.不透明度；
olBox.style.backgroundColor=o.背景；
olBox.style.top=“0px”；
olBox.style.left=“0px”；
document.body.appendChild（olBox）；
$wrapContent=link.attr（“href”）；
//警报（$wrapContent）；
if（$wrapContent.indexOf（“#”）==0）{
$wrapContent=$（$wrapContent.html（）；
//警报（$wrapContainer）；
$oBoxWrapper=$（“#CLBOxOuterRapper”）；
$clBoxOverlay=$（“#clBoxOverlay”）；
$clBoxOverlay.css({
“高度”：$（文档）.innerHeight（），
“宽度”：$（文档）.innerWidth（），
});
if（$oBoxWrapper.length）{
$clBoxWrapper.html（$wrapContainer）；
如果（o.PopUp==“固定”）{
$oBoxWrapper.css（{“maxHeight”：$（window.height（）}）；
if（$oBoxWrapper.innerHeight（）>=$（window.height（））{
$oBoxWrapper.css（“溢出”、“滚动”）；
}
如果（$oBoxWrapper.innerWidth（）>=$（window.width（））{
$oBoxWrapper.css（“overflowX”、“scroll”）；
}
}
$oBoxWrapper.css({
“左”：（$（window.width（）-$oBoxWrapper.innerWidth（））/2，
“顶部”：（$（窗口）.height（）-$oBoxWrapper.innerHeight（））/2
});
}
}
event.preventDefault（）；
});
//这不是我的插件完成任务后的事件处理代码吗？
如果（o.complete的类型=='function'）{
o、 complete.call（this）；//将范围带到回调
}
});        
}
})（jQuery，窗口）

---

加载页面时，它会在图像中显示信息，但当我单击选择器链接时，它不会触发回调函数。

如果要在触发click事件时触发complete回调函数，只需将调用移到内部即可：

    ;(function ($, window) {
  $.fn.coolBox = function (options) {
    console.log("calls to opens");
    var settings = {
        complete: false,
        beforeStart: false,
        Background: "#333",
        Opacity: "0.8",
        Padding: "10px",
        Height: "auto",
        Width: "auto",
        OverlayClose: true,
        EscClose: true,
        Zindex: "99991",
        Border: "2px",
        BorderColor: "black",
        PopUp: "fixed"
    };

    var o = {};
    $.extend(o, settings, options);

    //is this not for event handling before starting my plugin to change DOM?
    if (typeof o.beforeStart == 'function') {
        o.beforeStart.call(this); // brings the scope to the callback
    }
    return this.each(function () {
        var link = $(this);

        link.click(function (event) {
            var clBox = document.createElement('div');
            clBox.setAttribute("id", "clBoxWrapper");
            document.body.appendChild(clBox);

            $clBoxWrapper = $("#clBoxWrapper");
            $clBoxWrapper.wrap($("<div id='clBoxOuterWrapper'></div>"));
            oBox = document.getElementById("clBoxOuterWrapper");
            oBox.style.width = o.Width;
            oBox.style.height = o.Height;

            if (o.PopUp == "fixed") {
                oBox.style.position = "fixed";
            } else {
                oBox.style.position = "absolute";
            }
            oBox.style.zIndex = o.Zindex + 1;
            var olBox = document.createElement('div');
            olBox.setAttribute("id", "clBoxOverlay");
            olBox.style.width = "100%";
            olBox.style.height = "100%";
            olBox.style.position = "fixed";
            olBox.style.zIndex = o.Zindex;
            olBox.style.opacity = o.Opacity;
            olBox.style.backgroundColor = o.Background;
            olBox.style.top = "0px";
            olBox.style.left = "0px";

            document.body.appendChild(olBox);

            $wrapContent = link.attr("href");
            //alert($wrapContent);
            if ($wrapContent.indexOf("#") == 0) {
                $wrapContainer = $($wrapContent).html();
                //alert($wrapContainer);

                $oBoxWrapper = $("#clBoxOuterWrapper");
                $clBoxOverlay = $("#clBoxOverlay");
                $clBoxOverlay.css({
                    "height": $(document).innerHeight(),
                    "width": $(document).innerWidth(),
                });

                if ($oBoxWrapper.length) {
                    $clBoxWrapper.html($wrapContainer);

                    if (o.PopUp == "fixed") {
                        $oBoxWrapper.css({"maxHeight": $(window).height()});
                        if ($oBoxWrapper.innerHeight() >= $(window).height()) {
                            $oBoxWrapper.css("overflowY", "scroll");
                        }
                        if ($oBoxWrapper.innerWidth() >= $(window).width()) {
                            $oBoxWrapper.css("overflowX", "scroll");
                        }
                    }

                    $oBoxWrapper.css({
                        "left": ($(window).width() - $oBoxWrapper.innerWidth()) / 2,
                        "top": ($(window).height() - $oBoxWrapper.innerHeight()) / 2
                    });
                }
            }
               event.preventDefault();

               // THIS IS THE CALLBACK CALLED AT THE END OF CLICK
               if (typeof o.complete == 'function') {
                   o.complete.call(this); // brings the scope to the callback
               }
        });
    });        
}
})(jQuery, window);

；（函数（$，窗口）{
$.fn.coolBox=功能（选项）{
log（“打开的调用”）；
变量设置={
完成：错误，
beforeStart:false，
背景：“333”，
不透明度：“0.8”，
填充：“10px”，
高度：“自动”，
宽度：“自动”，
是的，
埃斯克洛斯：是的，
Zindex：“99991”，
边框：“2px”，
边框颜色：“黑色”，
弹出：“修复”
};
var o={}；
$.extend（o、设置、选项）；
//在启动插件更改DOM之前，这不是用于事件处理吗？
if（o.beforeStart的类型=='function'）{
o、 beforeStart.call（this）；//将范围带到回调
}
返回此。每个（函数（）{
var-link=$（这个）；
链接。单击（功能（事件）{
var clBox=document.createElement（'div'）；
C