无法通过按钮调用JavaScript函数问题求助

这个错误的核心是代码执行顺序问题：浏览器从上到下依次解析代码，当执行$("#csv-button").click(getCSV);这段绑定事件的代码时，getCSV函数还没被定义（它在后面的<script>标签里），浏览器找不到该函数，就抛出了"getCSV is not defined"的错误。

给你两种简单的解决方式：

方式一：调整代码顺序，先定义函数再绑定事件 #

把绑定事件的代码移到getCSV函数定义之后，确保函数存在后再绑定：

<button class="ui left floated submit button" id="csv-button">Copy</button>

<script>
     function getCSV() {
         alert("Function called")
     }
     // 函数定义完成后再绑定点击事件
     $("#csv-button").click(getCSV);
</script>

方式二：使用事件委托 #

通过事件委托把点击事件绑定到父元素（比如document）上，这样即使绑定代码先执行，点击按钮时浏览器才会去查找getCSV函数，此时函数已经定义完成：

<button class="ui left floated submit button" id="csv-button">Copy</button>
<script>
     // 用事件委托绑定
     $(document).on('click', '#csv-button', getCSV);
</script>

<script>
     function getCSV() {
         alert("Function called")
     }
</script>

内容的提问来源于stack exchange，提问作者Luca