我在加载脚本时遇到问题,这是我的 index.html 头:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Thai Express</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="style.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jQuery.fileinput.js"></script>
<script type="text/javascript" src="js/thai-express.js"></script>
</head>
这是我得到的错误:
未捕获的类型错误:对象 [object Object] 没有方法“customFileInput”
这是文件“thai-express.js”开头的一个偷偷摸摸的地方,我在其中得到了错误:
//on page load call _js_init
jQuery(document).ready(ThaiExpress_js_init);
function ThaiExpress_js_init(){
jQuery(".cf_upload").customFileInput(); // custom upload field
jQuery("#footer-promo li h3, ul#footer-promo li a.icon").hover(function(){ // hover both items simultaneously
jQuery(this).parent().find("h3 a, a.icon").addClass("hover");
},function(){
jQuery(this).parent().find("h3 a, a.icon").removeClass("hover");
});
我试图更改脚本加载顺序,但找不到解决方案。
我想我找到了问题的根源。我使用 Firefox 对其进行了调试,发现它永远不会进入这个函数“jQuery.fn.customFileInput = function(){”但是,我不知道如何解决这个问题。这是“jQuery.fileinput.js”的内容。
jQuery.fn.customFileInput = function(){
return jQuery(this).each(function(){
//apply events and styles for file input element
var fileInput = jQuery(this)
.addClass('customfile-input') //add class for CSS
.mouseover(function(){ upload.addClass('customfile-hover'); })
.mouseout(function(){ upload.removeClass('customfile-hover'); })
.focus(function(){
upload.addClass('customfile-focus');
fileInput.data('val', fileInput.val());
})
.blur(function(){
upload.removeClass('customfile-focus');
jQuery(this).trigger('checkChange');
})
.bind('disable',function(){
fileInput.attr('disabled',true);
upload.addClass('customfile-disabled');
})
.bind('enable',function(){
fileInput.removeAttr('disabled');
upload.removeClass('customfile-disabled');
})
.bind('checkChange', function(){
if(fileInput.val() && fileInput.val() != fileInput.data('val')){
fileInput.trigger('change');
}
})
.bind('change',function(){
//get file name
var fileName = jQuery(this).val().split(/\\/).pop();
//get file extension
var fileExt = 'customfile-ext-' + fileName.split('.').pop().toLowerCase();
//update the feedback
uploadFeedback
.text(fileName) //set feedback text to filename
.removeClass(uploadFeedback.data('fileExt') || '') //remove any existing file extension class
.addClass(fileExt) //add file extension class
.data('fileExt', fileExt) //store file extension for class removal on next change
.addClass('customfile-feedback-populated'); //add class to show populated state
//change text of button
uploadButton.text('Change');
})
.click(function(){ //for IE and Opera, make sure change fires after choosing a file, using an async callback
fileInput.data('val', fileInput.val());
setTimeout(function(){
fileInput.trigger('checkChange');
},100);
});
//create custom control container
var upload = jQuery('<div class="customfile"></div>');
//create custom control button
var uploadButton = jQuery('<span class="customfile-button" aria-hidden="true">Browse</span>').appendTo(upload);
//create custom control feedback
var uploadFeedback = jQuery('<span class="customfile-feedback" aria-hidden="true">No file selected...</span>').appendTo(upload);
//match disabled state
if(fileInput.is('[disabled]')){
fileInput.trigger('disable');
}
//on mousemove, keep file input under the cursor to steal click
upload.insertAfter(fileInput); //insert after the input
fileInput.appendTo(upload);
});
};
谢谢