Uncaught TypeError: $(...).customFileInput is not a function

2022-06-10 05:18 183阅读 0赞

1、错误描述

demo.js:214 Uncaught TypeError: $(...).customFileInput is not a function
        at HTMLDocument.<anonymous> (demo.js:214)
        at f (jquery-1.9.0.min.js:1)
        at Object.fireWith [as resolveWith] (jquery-1.9.0.min.js:1)
        at Function.ready (jquery-1.9.0.min.js:1)
        at HTMLDocument.xt (jquery-1.9.0.min.js:1)
    (anonymous)	@	demo.js:214
    f	@	jquery-1.9.0.min.js:1
    fireWith	@	jquery-1.9.0.min.js:1
    ready	@	jquery-1.9.0.min.js:1
    xt	@	jquery-1.9.0.min.js:1

2、错误原因

$(function () {
        //####### Buttons
        $('button,.button,#sampleButton').button();
    
        // Buttonset
        $('#radioset').buttonset();
        $("#format").buttonset();
    
        //####### Toolbar
        $("#play, #shuffle").button();
        $("#repeat").buttonset();
    
        //####### Accordion
        $("#menu-collapse").accordion({
            header: "h3"
        });
    
        // Dialog Link
        $('#dialog_link').click(function () {
            $('#dialog_simple').dialog('open');
            return false;
        });
    
        // Modal Link
        $('#modal_link').click(function () {
            $('#dialog-message').dialog('open');
            return false;
        });
        //hover states on the static widgets
        $('#dialog_link, #modal_link, ul#icons li').hover(
            function () {
                $(this).addClass('ui-state-hover');
            }, function () {
                $(this).removeClass('ui-state-hover');
            }
        );
    
        // Dialog Simple
        $('#dialog_simple').dialog({
            autoOpen: false,
            width: 600,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
    
        //####### Dialogs
        $("#dialog-message").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
    
        // Remove focus from buttons
        $('.ui-dialog :button').blur();
    
        //####### Tabs
        $('#tabs2, #tabs, #tabs3').tabs();
    
        // Dynamic tabs
        var tabTitle = $( "#tab_title" ),
            tabContent = $( "#tab_content" ),
            tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
            tabCounter = 2;
    
        var tabs = $( "#tabs2" ).tabs();
    
        // modal dialog init: custom buttons and a "close" callback reseting the form inside
        var dialog = $( "#dialog2" ).dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Add: function() {
                    addTab();
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                form[ 0 ].reset();
            }
        });
    
        // addTab form: calls addTab function on submit and closes the dialog
        var form = dialog.find( "form" ).submit(function( event ) {
            addTab();
            dialog.dialog( "close" );
            event.preventDefault();
        });
    
        // actual addTab function: adds new tab using the input from the form above
        function addTab() {
            var label = tabTitle.val() || "Tab " + tabCounter,
                id = "tabs-" + tabCounter,
                li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
                tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
    
            tabs.find( ".ui-tabs-nav" ).append( li );
            tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
            tabs.tabs( "refresh" );
            tabCounter++;
        }
    
        // addTab button: just opens the dialog
        $( "#add_tab" )
            .button()
            .click(function() {
                dialog.dialog( "open" );
            });
    
        // close icon: removing the tab on click
        $( "#tabs2" ).on( "click",'span.ui-icon-close', function() {
    
            var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });
    
        //Combination examples (tabs) and open dialog
        $('#sampleButton').on('click', function(event){
            event.preventDefault();
            $('#dialog_simple').dialog({
                autoOpen: true,
                modal: true,
                width: 600,
                buttons: {
                    "Save": function () {
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    
        //####### Datepicker
        $('#datepicker').datepicker({
            inline: true
        });
    
        //####### Slider
    
        // Horizontal slider
        $('#h-slider').slider({
            range: true,
            values: [17, 67]
        });
    
        // Vertical slider
        $("#v-slider").slider({
            orientation: "vertical",
            range: "min",
            min: 0,
            max: 100,
            value: 60,
            slide: function (event, ui) {
                $("#amount").val(ui.value);
            }
        });
        $("#amount").val($("#v-slider").slider("value"));
    
        // Autocomplete
        var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
    
        $("#tags").autocomplete({
            source: availableTags
        });
    
        //####### Menu
        $("#menu").menu();
    
        //####### Spinner
    
        var spinner = $( "#spinner" ).spinner();
    
        $( "#disable" ).click(function() {
            if ( spinner.spinner( "option", "disabled" ) ) {
                spinner.spinner( "enable" );
            } else {
                spinner.spinner( "disable" );
            }
        });
        $( "#destroy" ).click(function() {
            if ( spinner.data( "ui-spinner" ) ) {
                spinner.spinner( "destroy" );
            } else {
                spinner.spinner();
            }
        });
        $( "#getvalue" ).click(function() {
            alert( spinner.spinner( "value" ) );
        });
        $( "#setvalue" ).click(function() {
            spinner.spinner( "value", 5 );
        });
    
        //####### Tooltip
    
        $( "#tooltip" ).tooltip();
    
        // File input (using http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/)
        $('#file').customFileInput({
            button_position : 'right'
        });
    
        //####### Wijmo
    
        $("#menu1").wijmenu({ trigger: ".wijmo-wijmenu-item", triggerEvent: "click" });
    
        // Select a Date Range with datepicker
        $( "#rangeBa" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onClose: function( selectedDate ) {
                $( "#rangeBb" ).datepicker( "option", "minDate", selectedDate );
            }
        });
        $( "#rangeBb" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onClose: function( selectedDate ) {
                $( "#rangeBa" ).datepicker( "option", "maxDate", selectedDate );
            }
        });
    });

上述js代码：

$('#file').customFileInput({
            button_position : 'right'
     });

3、解决办法