单独文件中的 jQuery 函数，

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 框架。

控制台错误：未捕获的 TypeError：Object [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>

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