Question

here is code inspect in chrome when page loads

我正在尝试创建一个jquery模式插件，并且无法理解为什么我的回调函数在页面加载时触发？我需要在打开弹出窗口之前触发两个函数beforeStart，然后在弹出窗口打开之后打开afterComplete，而不是在页面加载时触发，但是所有它都在页面加载时发生。代码有什么问题。我google了一整天仍然无法得到它。 this stackoverflow 也不适用于我。

这是我的代码

<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>

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

 ;(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)

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

Answer 1

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

    ;(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);

您可以在此处查看：http://jsfiddle.net/benjasHu/eyka9z0b/

这就是你需要的吗？

为什么回调函数在页面加载时触发：jQuery插件开发

1 个答案: