プラグイン内のjQuery-UIダイアログがすぐにコールバックを呼び出す

Question

プラグインの中で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 
     } 
    }); 
}); 

を呼び出します。

Answer 1

これは、関数ではなくopts.onCloseコールバック関数の実行結果を割り当てるためです。代わりにインライン関数でラップします。

また、変数を使用してこの変数をcallback.callに渡します。

にあなたのreturn文を変更し

：

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