Question

我在stackoverflow上找到了一个很好的jQuery脚本，我想把它放在一个单独的.js文件中。

我想这样做是因为我想在超过1页的文件中使用该文件。

如果我将此代码放在特定页面上的脚本标记中，它可以正常工作，但是当我在头部引用它时，它就会出现。

   (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, '&amp;').replace(/\s/g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                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();

我就是这样做的：

我把它放在一个单独的文件中：

    (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, '&amp;').replace(/\s/g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    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);

然后我从布局中这样称呼它：

<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>

它仍然无法工作，我可以补充一点，我使用的是MVC FrameWork。

控制台错误：未捕获TypeError：对象[object Object]没有方法'autoGrowInput'

我也可以说.js文件包含在源代码中，同样适用于$（'input'）。autoGrowInput（）;

Answer 1

您必须在加载文档后致电$('input').autoGrowInput();。

试试这个：

$(function(){
    $('input').autoGrowInput();
});

Answer 2

您在代码中对autoGrowInput的引用应该在您内联定义或指定包含它的外部脚本标记之后。

此外，您必须在已加载的元素上使用它。

尝试使用文档就绪事件，如下所示：

$(function(){
    $('input').autoGrowInput();
});

Answer 3

首先确保您引用jquery，然后引用您的脚本

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>

然后在文档准备就绪后调用函数。

<script type="text/javascript">
$('document').ready(function(){
  $('input').autoGrowInput();
});
</script>

Answer 4

<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>

清除浏览器缓存....并再次测试。

jQuery函数在单独的文件中，

4 个答案: