jQuery UI Widget Factory - JavaScript參考錯誤函數未定義

Question

我在調用我試圖創建的自定義對話框小部件中的私有/公用函數時遇到問題。出於某種原因，當我嘗試從_create（）方法調用名爲_clean（）的方法時，我在Firebug中不斷收到一條錯誤消息，提示存在「參考錯誤：_clean未定義」。這裏是我的代碼：

(function($, window, document, undefined) { 
$.widget("ui.supernovae", $.ui.dialog, { 
    options: { 
     // default options 
     height: 700, 
     width: 1500, 
     maxWidth: 1500, 
     autoOpen: false, 
     disabled: true, 
     draggable: false, 
     title: "Supernovae v0.1", 
     resizable: false, 
     modal: true 
    }, 

    _create: function() { 
       $.ui.dialog.prototype._create.apply(this); //call the constructor of the ui.dialog widget 

       //set the variables needed - cache when appropriate 
       var self = this.element, 
        options = self.options, 
        childList = self.find("#supernovaTabs > li") 
        progressBar = self.children("#progressbarSupernova"), 
        tabContent = $("#supernova_tab_content").children("div"); 

       var pvalue = 0; 

       progressBar.progressbar({value: 33.3}); // set up the progress bar 
       tabContent.find("button").button({ icons: { primary: "ui-icon-search" } }); 

       $("#search1").bind('click', function(){ 
        _clean(1); // here is where the reference error occurs 
        var the_name = String($("#obj_name").val()); 
        console.log("The name: " + the_name); 
        search(the_name, null, null, null); 
       }); 

       $("#search2").bind('click', function(){ 
        _clean(2); 
        var the_ra = parseFloat($("#obj_ra").val()); 
        var the_dec = parseFloat($("#obj_dec").val()); 
        var the_eplison = parseFloat($("#obj_epsilon").val()); 
        search(null, the_ra, the_dec, the_eplison); 
       }); 

       childList.on("click", function(event){ 
        event.preventDefault(); 
        childList.removeClass("selectedSupernovaTab"); 
        $(this).addClass("selectedSupernovaTab"); 

        tabContent.hide(); //Hide all tab content 

        //handle the progressbar animations to align correctly with the list items above 
        switch($(this).index()){ 
         case 0: 
          pvalue = "33%"; 
          break; 
         case 1: 
          pvalue = "66.4%"; 
          break; 
         case 2: 
          pvalue = "100%"; 
          break; 
        } 
        progressBar.children(".ui-progressbar-value").animate({width: pvalue}, 700, 'easeOutCubic'); //animate the progressbar 

        var activeDivId = $(this).find("a").attr("href"); 
        $(activeDivId).fadeIn(); 
       });    
    }, 

    _clean: function(type) { 
       $("div.item").remove(); 
      if(type == 1){ 
       $("#obj_ra").val(''); 
       $("#obj_dec").val(''); 
       $("#obj_epsilon").val(''); 
      }else if(type == 2){ 
       $("#obj_name").val(''); 
      }else{ 
       ; 
      } 
    } 
});  

})(jQuery, window, document); 

function initSupernovaeExt(){ 
$("#supernovae").button({ 
    label:"Supernovae v0.1", 
    icons: {primary:"ui-icon-snicon"} 
}); 

$("#supernovae_dialog").supernovae({ 
    open: function(event, ui) { 
     //Set up the initial views 
     tabContent.hide(); // Hide all tab content initially 
     $("#searchSupernova").fadeIn({duration: 1000});  //fade in the first div content 
    } 
}); 

$("#supernovae").button().on("click.showSNExt", function(){ 
    $("#supernovae_dialog").supernovae("open"); 
}); 
} 

我可能失去了一些東西很容易，但我似乎無法找出原因的功能不會被調用。我只想確保我在正確的位置綁定了click處理程序，並且在處理程序綁定之前_clean（）函數被解析。感謝所有的幫助。

Answer 1

對於遇到這個問題的其他人，我最終發現了這個問題：我忘記了在調用「private」方法時使用「this」引用窗口小部件實例，並且在綁定click處理程序時，我意識到在嘗試使用this._xxx（）調用窗口小部件的方法之前，我必須將「this」元素（窗口小部件實例）保存在單獨的變量中，否則「this」將引用click處理程序中的目標元素。這是我更新的代碼：

_create: function() { 
      $.ui.dialog.prototype._create.apply(this); //call the constructor of the ui.dialog widget 

      //set the variables needed - cache when appropriate 
      var self = this.element, 
       that = this, 
       options = self.options, 
       childList = self.find("#supernovaTabs > li") 
       progressBar = self.children("#progressbarSupernova"), 
       tabContent = $("#supernova_tab_content").children("div"); 

      var pvalue = 0; 

      progressBar.progressbar({value: 33.3}); // set up the progress bar 
      tabContent.find("button").button({ icons: { primary: "ui-icon-search" } }); 

      $("#search1").on('click', function(){ 
       that._clean(1); // here is where the reference error occurs 
       var the_name = String($("#obj_name").val()); 
       console.log("The name: " + the_name); 
       //search(the_name, null, null, null); 
      }); 

      $("#search2").on('click', function(){ 
       that._clean(2); 
       var the_ra = parseFloat($("#obj_ra").val()); 
       var the_dec = parseFloat($("#obj_dec").val()); 
       var the_eplison = parseFloat($("#obj_epsilon").val()); 
       //search(null, the_ra, the_dec, the_eplison); 
      }); 

      childList.on("click", function(event){ 
       event.preventDefault(); 
       childList.removeClass("selectedSupernovaTab"); 
       $(this).addClass("selectedSupernovaTab"); 

       tabContent.hide(); //Hide all tab content 

       //handle the progressbar animations to align correctly with the list items above 
       switch($(this).index()){ 
        case 0: 
         pvalue = "33%"; 
         break; 
        case 1: 
         pvalue = "66.4%"; 
         break; 
        case 2: 
         pvalue = "100%"; 
         break; 
       } 
       progressBar.children(".ui-progressbar-value").animate({width: pvalue}, 700, 'easeOutCubic'); //animate the progressbar 

       var activeDivId = $(this).find("a").attr("href"); 
       $(activeDivId).fadeIn(); 
      });    
}, 

_clean: function(type) { 
      $("div.item").remove(); 
      if(type == 1) { 
       $("#obj_ra").val(''); 
       $("#obj_dec").val(''); 
       $("#obj_epsilon").val(''); 
      } else if(type == 2) { 
       $("#obj_name").val(''); 
      } else { 
      ; 
      } 
}