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

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

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

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

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

希望能帮助到你。