從jQuery插件中訪問公共函數

Question

這是我第一次在沒有教程的情況下編寫jQuery插件。現在（2014年9月28日），jQuery網站不起作用（我不知道爲什麼），所以我在那裏找不到任何資源。

下面是我的插件的一部分，該報告錯誤：

$(function($){ 
    $.fn.dialog = function(command, options) { 
     var opts = $.extend({}, $.fn.dialog.defaults, options); 
     //code 
     $.fn.dialog.handleCancel = function() { 

     }; 
     $.fn.dialog.handleAccept = function() { 

     }; 
     return this; 
    }; 

    $.fn.dialog.defaults = { 
     // some other props 
     onCancel: $.fn.dialog.handleCancel(), 
     onAccept: $.fn.dialog.handleAccept() 
    }; 
    // code 
}(jQuery)); 

當我調用插件（$("#dialog1").dialog(/*..*/)），瀏覽器控制檯，顯示以下內容：

Uncaught TypeError: undefined is not a function 

的錯誤是在與onCancel: $.fn.dialog.handleCancel()一致。

我怎樣才能訪問這些方法，他們應該在哪裏？ （我也希望他們有機會獲得$(this) < - 對話框本身），直到調用$.fn.dialog功能

Answer 1

你handleCancel和handleAccept功能不被初始化。因此，當您設置對話框的默認值時，它們是未定義的。

插入此代碼之前$.fn.dialog.defaults：

$.fn.dialog(); 

Answer 2

嘗試重新安排片內的塊，增加一個過濾器，以防止兩者handleCancel和handleAccept默認進行調用;例如，

(function($){ 
 
    $.fn.dialog = function(command, options) { 
 
     var $el = this; 
 
     // access , pass arguments to methods 
 
     $.fn.dialog.handleCancel = function(c) { 
 
      $el.html(c + "led") 
 
     }; 
 
     $.fn.dialog.handleAccept = function(a) { 
 
      $el.html(a + "ed") 
 
     }; 
 
     // call `handleCancel` or `handleAccept` , 
 
     // based on `command` 
 
     $.fn.dialog.defaults = { 
 
     // some other props 
 
     onCancel: command === "cancel" 
 
           ? $.fn.dialog.handleCancel(command) 
 
           : null, 
 
     onAccept: command === "accept" 
 
           ? $.fn.dialog.handleAccept(command) 
 
           : null 
 
    }; 
 
     var opts = $.extend({}, $.fn.dialog.defaults, options); 
 
     //code 
 
     
 
     return this; 
 
    }; 
 
    // code 
 
}(jQuery)); 
 

 
$("button").on("click", function(e) { 
 
    $("#result").dialog(e.target.id) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="accept">accept</button><button id="cancel">cancel</button><br /> 
 
Result: <div id="result"></div>