无法触发 onclick 事件答案

【问题标题】：can't trigger onclick event无法触发 onclick 事件
【发布时间】：2015-10-22 11:46:48
【问题描述】：

我的 index.html 文件中有一个与函数相关的 onclick 事件：

<div class="text-center"><div class="btn btn-success expand20" onclick="expand()">Agrandir à 20</div></div>

我的 minesweeper.js 文件链接在 html 中，如下所示：

<script type="text/javascript" src="minesweeper.js"></script>

我的函数 expand.js 是在 minesweeper.js 中定义的：

$( document ).ready(function() {
    function expand() {
        for (i = 0; i < 20; i++) {
            $("table").append("<tr><td class='unopened'></td><td class='unopened'></td></tr>");
        }
    }
});

Jquery 包含在我的 html 文件的末尾：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

但是当我点击按钮时，我得到了

未捕获的引用错误：未定义扩展

我做错了什么？

【问题讨论】：

您是否包含了 JQuery CDN？
将代码放在 head 部分，也放在 Document ready 处理程序之外。
$(document).ready(function(){}); 是 jQuery..所以如果您在代码执行之前没有加载库，您一定会收到错误消息。您还可以通过将函数分配给window.onload = function(){ //your code here} 或window.onload = expand(); 来工作，您还应该避免在 html 中添加 JS 事件处理程序，使用 JS 选择器并仅在 DOM 准备好后应用事件。

标签： jquery events onclick

【解决方案1】：

问题在于 DOM 中的事件处理程序试图访问全局范围内可用的函数。

由于您在闭包内定义函数 expend（在 jQuery 就绪上调用的匿名函数），因此该函数在该范围内定义，但不在全局范围内。

另外，定义这样的函数不需要等待 domReady... 我建议您将声明移到该事件处理程序之外，并且只使用它来实际执行某些操作。

【讨论】：