插件内的jQuery-UI对话框立即使用回调触发答案

【问题标题】：jQuery-UI dialog inside plugin using callback firing immediately插件内的jQuery-UI对话框立即使用回调触发
【发布时间】：2011-01-29 07:58:43
【问题描述】：

我在插件中使用 jQuery-UI，并尝试为对话框的 close: 事件设置回调函数。我认为我做错了，因为它会在页面加载时立即触发 (2x)，而不是在对话框关闭时触发。

插件代码

(function($) {

    //dynamically add UI CSS
    var link = $('<link>');
    link.attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/black-tie/jquery-ui.css'
    }).appendTo('head');

    //dynamically add UI JS
    var script = $('<script'>);
    script.attr({
        type: 'text/javascript',
        src: 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'
    }).appendTo('head');

    $.fn.photoDialog = function(options) {

        //set default settings
        var defaults = {
            autoOpen: false,
            title: 'Photo Tool',
            minHeight: 560,
            minWidth: 540,
            url: 'http://www.goffinmoleculartechnologies.com/images/no-image-large.png',
            onClose: function(){}
        };

        //extend options to defaults
        var opts = $.extend(defaults, options);

        return this.each(function() {
            $this = $(this);
            //create UI dialog
            var $dialog = $('<div>')
                .html('<img src="' + opts.url + '" width="' + opts.minWidth + '" height="' + minHeight + '" alt="" />')
                .dialog({
                    autoOpen: opts.autoOpen,
                    title: opts.title,
                    minHeight: opts.minHeight,
                    minWidth: opts.minWidth,
                    modal: true,
                    close: opts.onClose.call(this) //callback function
                });

            //add dialog open to click function of caller
            $this.click(function() {
                $dialog.dialog('open');
                return false;
            });
        });
    };
})(jQuery);

调用页面代码

$(document).ready(function() {
    $('.photoLink').photoDialog({
        url: 'http://tvrecappersanonymous.files.wordpress.com/2010/03/doozer2.jpg',
        title: 'Doozer',
        onClose: function() {
            alert('Callback'); //fires 2x when page loads
        }
    });
});

感谢任何关于我做错了什么的建议。

【问题讨论】：

标签： jquery-ui jquery-plugins jquery-callback

【解决方案1】：

这是因为您分配的是 opts.onClose 回调函数执行的结果而不是函数。而是将其包装在一个内联函数中。

同样使用一个变量将这个变量传递给callback.call。

将您的退货声明更改为：

return this.each(function() {
            var $this = $(this);
            var that = $(this);
            //create UI dialog
            var $dialog = $('<div>')
                .html('<img src="' + opts.url + '" width="' + opts.minWidth + '" height="' + minHeight + '" alt="" />')
                .dialog({
                    autoOpen: opts.autoOpen,
                    title: opts.title,
                    minHeight: opts.minHeight,
                    minWidth: opts.minWidth,
                    modal: true,
                    close: function(){
                    opts.onClose.call(that) //callback function
                    }
                });

【讨论】：