Question

我有这段代码：

<script>
    $(function () {
        function back_to_top(){
            $('body,html').animate({scrollTop: 0}, 100);
        }
    });
</script>

<div class="toTop" onClick="back_to_top();">To up!</div>

当我点击此按钮时，chrome会显示此错误：未捕获的ReferenceError：未定义back_to_top。 我的错误在哪里？

Answer 1

这是因为jQuery DOM ready函数创建了一个新的作用域，包含了你的函数，这意味着它无法从全局作用域访问。内联事件必须在全局范围内。

function back_to_top(){
    $('body,html').animate({scrollTop: 0}, 100);
}
$(function () {

});

或者删除内联处理程序并使用不引人注目的JavaScript。

$(function () {
    function back_to_top(){
        $('body,html').animate({scrollTop: 0}, 100);
    }

    $('.toTop').click(function(){
        back_to_top();
    });
});

没有内联处理程序的HTML：

<div class="toTop">To up!</div>

Answer 2

您必须将back_to_top放在jquery文档就绪函数

之外

Answer 3

JavaScript具有功能范围。这意味着函数中定义的变量（包括函数声明）只能在该函数中使用。即，在这种情况下back_to_top只能在$(function(){...})内访问。

...onClick="back_to_top();"正在查看全局范围，back_to_top不可用。如果您执行以下操作，则可以公开它：

$(function () {
        window.back_to_top = function {
            $('body,html').animate({scrollTop: 0}, 100);
        }
    });

我不认为这是理想的，但它会适用于你的情况。更好的方法是附加一个监听器。看看jQuery click方法。

希望它有所帮助。

jquery：未捕获的ReferenceError：函数未定义

3 个答案: