JavaScript“myFunction”不是一个函数，即使它是

Question

我有类似的东西

let myFunction;
$(document).ready(function() {
    myFunction = function(param) {
        // ...
    }
});

在我的HTML中，我有

<a href="javascript:void(0);" onclick="myFunction(1)">...</a>

现在它说Uncaught ReferenceError: myFunction is not defined。

let myFunction;
$(document).ready(function() {
    myFunction = function(param) {
        console.log('running');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0);" onclick="myFunction(1)">...</a>

好的，所以我尝试的是：

$(document).ready(function() {
    function myFunction(param) {
        // ...
    }
});

但再次，Uncaught ReferenceError: myFunction is not defined。我不知道，真的，我现在很长一段时间使用了第一段代码而且突然间，它不再起作用了（或者不在我的上下文中，或者什么都没有）。对此有什么正确的解决方法？

我创建了一个JSFiddle，以显示我尝试的内容确实不起作用（预期输出在警报中为1或2，给出错误）：https://jsfiddle.net/kgdcwe4z/5/

Answer 1

最好只使用Jquery，如下所示：

<a href="javascript:void(0);" data-id="1" id="test">...</a>

$(document).ready(function() {
    $("#test").on('click', function() {
       const id = $(this).attr('data-id');
       //doSomething considering the id as the param here
    });
});

另一个只有Javascript的解决方案是：

const myFunction = function(param) {
    // ...
}

<a href="javascript:void(0);" onClick="myFunction(1)">...</a>

使用现有代码，您可以使用闭包实现这样的：

$(document).ready(function() {
    func = function(param) {
  console.log('param => ', param)
  }
})(func);

更新的回答链接：https://jsfiddle.net/cjnp40e6/

Answer 2

只需将函数移动到全局范围即可。

// outside of $(document).ready(function() { ...
function myFunction(param) {
    // ...
}