jQuery中 .ready() 作用域 / 执行顺序的疑问？

Question

先上代码：

<div id="four">four</div>

<div id="five" onclick="fn()">five</div>

    <script>

    $(document).ready(function() {

        $('#four').on('click', function() {

            alert('four')

        });

        

        function fn () {

            alert('five')

        }

    })

疑问：

这个时候点击 #four 时，可以触发事件，但点击 #five 时，不能触发事件，控制台报错为 fn is not defined。

如果把 fn 函数放到 .ready() 外面的时候是可以正常触发事件。

on 绑定的事件不管在 .ready() 里面还是外面都可以正常使用。

如果说 .ready() 里面的方法在 DOM 加载完后，里面的函数就会销毁掉，那么为什么 .on() 绑定的事件还能正常执行？

如果说 是作用域的 问题，同样 为什么 .on() 的可以执行， 而 fn 函数又不能触发了呢？

如果说 fn 在 DOM 加载完之后就执行了，但实际上代码中并没有调用 fn() ，同时 .on() 里面的匿名函数也没有被执行啊。

这个问题到底是作用域的问题还是执行顺序的问题？

还是这里jQuery有一套什么机制？

Answer 1

和jquery无关,函数的作用于问题,onclick绑定的fn是全局的,你放在ready匿名函数的作用域里面显然是不行的，