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

我可能错过了一些非常简单的东西，但我似乎不明白为什么没有调用该函数。我只想确保我将点击处理程序绑定在正确的位置，并且在绑定处理程序之前解析_clean（）函数。谢谢你的帮助。

Answer 1

对于遇到这个问题的其他人，我最终解决了这个问题：在调用"private"方法时，以及在绑定单击处理程序时，我忘记了用"this"引用小部件实例。我意识到，在尝试用this调用小部件的方法之前，我必须将"this"元素（小部件实例）保存在一个单独的变量中_xxx（），否则"this"将指向单击处理程序中的目标元素。这是我更新的代码：

_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 {
             ;
           }
}