[英]jQuery function in separate file,
i found a good jQuery script here on stackoverflow that i want to put in a separate .js file. 我在stackoverflow上找到了一个很好的jQuery脚本,我想把它放在一个单独的.js文件中。
I want to do this because i want to use the file on more than 1 page. 我想这样做是因为我想在超过1页的文件中使用该文件。
If i place this code inside script tags on a specifik page it works, but when i refer to it in the head it doesent. 如果我将此代码放在特定页面上的脚本标记内,它可以工作,但是当我在头部引用它时,它就会执行。
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
comfortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
}; })(jQuery); $('input').autoGrowInput();
This is how i do it: 我就是这样做的:
I put this in a separate file: 我把它放在一个单独的文件中:
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
comfortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
};
})(jQuery);
then i call it from the Layout like this: 然后我从布局中调用它,如下所示:
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="~/Scripts/Forms/dynamicFormSize.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('input').autoGrowInput();
});
</script>
// REST OF SITE HERE...
</body>
It still doesen't work, i may add that i use the MVC FrameWork. 它仍然不起作用,我可以补充一点,我使用MVC FrameWork。
Console error: Uncaught TypeError: Object [object Object] has no method 'autoGrowInput' 控制台错误:未捕获TypeError:对象[object Object]没有方法'autoGrowInput'
I also can say that the .js file is included in source, same for $('input').autoGrowInput(); 我也可以说.js文件包含在源代码中,同样适用于$('input')。autoGrowInput();
You have to call $('input').autoGrowInput();
你必须调用
$('input').autoGrowInput();
after the document has been loaded. 文档加载后。
Try this: 试试这个:
$(function(){
$('input').autoGrowInput();
});
Your references to the autoGrowInput
in your code should come after you have defined it inline or specified an external script tag which contains it. 您在代码中对
autoGrowInput
引用应该在您内联定义或指定包含它的外部脚本标记之后。
Also you have to use it on elements which were already loaded. 此外,您必须在已加载的元素上使用它。
Try using the document ready event like so: 尝试使用文档就绪事件,如下所示:
$(function(){
$('input').autoGrowInput();
});
First make sure you reference jquery
and then your script 首先确保引用
jquery
然后引用脚本
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
Then call function after document is ready. 然后在文档准备好后调用函数。
<script type="text/javascript">
$('document').ready(function(){
$('input').autoGrowInput();
});
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
<script type="text/javascript">
$('document').ready(function(){
autoGrowInput();
});
</script>
clear cache on browser .... and test again . 在浏览器上清除缓存....并再次测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.