我的jQuery回调失败

Question

我创建了一个插件来显示Metro MessageBar，并且效果很好。 我被要求支持callbacks并为此目的向fadeIn功能添加了一些代码。

由于某种原因， callback显示为有效function ，但不调用？

这是我得到的控制台消息：

this.trigger is not a function

...任何帮助表示赞赏。

这是如何使用插件的：

this.showSubmitMessage = function () {
    var options = {
        message: "This is a test.",
        messageType: "information"
        };

    // self.btnSubmit.click IS a valid function!!!  Use your own if you want.
    nalco.es.rk.globals.messageBarManager.display(options, self.btnSubmit.click);
};

这是插件中的有害代码区：

this.fadeIn = function (element, callback) {
element.prependTo(self.container).centerToScrollTop().fadeIn(self.globals.fadeDuration, function() {
       if (callback != null)
           if ($.isFunction(callback))
               setTimeout(function () {
                   callback();
                }, self.globals.callbackDuration);
    });
};

这是整个用户控制插件：
请注意，文件相关性“ jquery.Extensions.js”的代码在此文章的底部。

    <script src="Scripts/jQuery/Core/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jQuery/Core/jquery.tmpl.js" type="text/javascript"></script>

    <script src="Scripts/jQuery/jquery.Extensions.js" type="text/javascript"></script>

<style type="text/css">
    .messageBar { background-color: #DDDDDD; color: #666666; display: none; left: 0; padding: 15px; position: absolute; top: 0; width: 932px; z-index: 1000; }
    .messageBar .content { width: 100%; }
    .messageBar .content td.image { width: 70px; }
    .messageBar .content td.button { width: 60px; }
    .messageBar .button { margin-top: 0px; }

    .messageBar .content .icon { background-repeat: no-repeat; height: 31px; overflow: hidden; width: 31px; }
    .messageBar .content .message {  }
    .messageBar .content .image { background-repeat: no-repeat; height: 10px; overflow: hidden; width: 70px; }

    .messageBar.error { background-color: #FFBABA; color: #D8000C; }
    .messageBar.information { background-color: #99CCFF; color: #00529B; }
    .messageBar.success { background-color: #DFF2BF; color: #4F8A10; }
    .messageBar.warning { background-color: #FEEFB3; color: #9F6000; }

    .messageBar.error .content .icon { background-image: url('/_layouts/images/error.png'); }
    .messageBar.information .content .icon { background-image: url('/_layouts/images/info.png'); }
    .messageBar.success .content .icon { background-image: url('/_layouts/images/success.png'); }
    .messageBar.warning .content .icon { background-image: url('/_layouts/images/warning.png'); }
</style>

<script id="template-messageBar" type="text/html">
    <div class="messageBar">
        <table class="content">
            <tbody>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td class="button">
                        <input type="button" value="Close" class="button metroButton" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</script>

<script id="template-messageBar-icon" type="text/html">
    <div class="icon">
    </div>
</script>

<script id="template-messageBar-message" type="text/html">
    <div class="message">
        ${Message}
    </div>
</script>

<script id="template-messageBar-image" type="text/html">
    <div class="image">
    </div>
</script>

    <script type="text/javascript">
        ;nalco.es.rk.source.MessageBarManager = (function ($) {
            var publicInstances = {};

            publicInstances.Controller = Controller;
            function Controller(options) {

                var self = this;

                this.messageTypes = { error: "error", information: "information", normal: null, success: "success", warning: "warning" };
                this.globals = {
                    callbackDuration: 2000,
                    fadeDuration: 700,
                    workingImageUrl: "url('/_layouts/images/Nalco.ES.SharePoint.UI/metro-ajax-loader-blue.gif')"
                };
                this.defaults = {
                    message: "",
                    messageType: self.messageTypes.normal,
                    showIcon: false,
                    showWorkingImage: false
                };

                this.container = $('body');

                this.templateMessageBarId = '#template-messageBar';
                this.templateMessageBarIconId = '#template-messageBar-icon';
                this.templateMessageBarMessageId = '#template-messageBar-message';
                this.templateMessageBarImageId = '#template-messageBar-image';

                this.selectors = { content: '.content', closeButton: '.button', root: '.messageBar' };

                this.initialize = function () {
                    self.display(options);
                };
                this.display = function (options, callback) {

                    var empty = {};
                    var settings = $.extend(empty, self.defaults, $.isPlainObject(options) ? options : empty);

                    if (settings.messageType != null)
                        if (settings.messageType.length == 0)
                            settings.messageType = self.messageTypes.normal;

                    if (settings.message.length == 0)
                        return;

                    var eleMessageBar = $(self.templateMessageBarId).tmpl(empty);
                    var eleContent = $(self.selectors.content, eleMessageBar);
                    var eleCellOne = $('td:eq(0)', eleContent);
                    var eleCellTwo = $('td:eq(1)', eleContent);
                    var eleCellThree = $('td:eq(2)', eleContent);

                    var eleMessage = $(self.templateMessageBarMessageId).tmpl({ Message: settings.message });
                    var btnClose = $(self.selectors.closeButton, eleMessageBar);

                    if (settings.messageType != self.messageTypes.normal) {
                        eleMessageBar.addClass(settings.messageType);

                        if (settings.showIcon) {
                            var eleIcon = $(self.templateMessageBarIconId).tmpl(empty);
                            eleCellOne.css('width', '31px');
                            eleIcon.appendTo(eleCellOne);
                        }
                    }

                    eleMessage.appendTo(eleCellTwo);
                    btnClose.click(function () {
                        eleMessageBar.fadeOut(self.globals.fadeDuration, function () {
                            eleMessageBar.remove();
                        });
                    });

                    if (settings.showWorkingImage) {
                        var eleImage = $(self.templateMessageBarImageId).tmpl(empty);
                        eleCellThree.addClass('image');
                        eleImage.css('background-image', self.globals.workingImageUrl);
                        eleImage.appendTo(eleCellThree);
                    }

                    var elePreviousMessage = $(self.selectors.root, self.container);
                    if (elePreviousMessage.length > 0) {
                        btnClose = $(self.selectors.closeButton, elePreviousMessage);
                        btnClose.click();
                        setTimeout(function () { self.fadeIn(eleMessageBar, callback); }, self.globals.fadeDuration);
                    }
                    else
                        self.fadeIn(eleMessageBar, callback);
                };
                this.fadeIn = function (element, callback) {
                    element.prependTo(self.container).centerToScrollTop().fadeIn(self.globals.fadeDuration, function() {
                        if (callback != null)
                            if ($.isFunction(callback))
                                setTimeout(function () {
                                     callback();
                                }, self.globals.callbackDuration);
                    });
                };

                self.initialize();
            };

            return publicInstances;
        })(jQuery);

        function initializeMessageBarManager() {
            nalco.es.rk.globals.messageBarManager = new nalco.es.rk.source.MessageBarManager.Controller();
        }

        $(document).ready(function () {
            initializeMessageBarManager();

            if (typeof (Sys) != "undefined")
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(initializeMessageBarManager);
        });
    </script>

这是以上文件中列出的扩展名依赖：

// **********************
// .centerToScrollTop
// Use -
// Centers an ELEMENT to the window's scrollTop.
//
// Example -
// $('.myElement').centerToScrollTop();
// **********************
(function ($) {
    $.fn.extend({
        centerToScrollTop: function (options) {
            return this.each(function () {
                var element = $(this);
                var container = $(window);
                var scrollTop = container.scrollTop();
                var buffer = 30;
                var top = scrollTop + buffer;
                var left = (container.width() - element.outerWidth()) / 2 + container.scrollLeft();

                element.css({ 'position': 'absolute', 'top': top, 'left': left });

                return element;
            });
        }
    });
})(jQuery);

Answer 1

如果您忘记包含jquery-ui.min.js等文件，通常会发生这种类型的错误。请仔细检查是否添加了所有必要的引用。