在 HTML 标记内调用 javascript 函数答案

【问题标题】：Calling javascript function inside HTML tag在 HTML 标记内调用 javascript 函数
【发布时间】：2011-12-23 05:29:41
【问题描述】：

我有以下。

<a href="#" onclick="hello()">click me</a>

我有一个 Javascript 文件

$(document).ready(function() {
  function hello() {
    alert('hi');
  }
});

但是当我点击“点击我”时，警报并没有被触发。它说“你好”没有定义。我删除了 document.ready，它可以工作。

这是因为在整个文档准备好之前没有定义“hello”，但是在渲染上面的“anchor”标签时却找不到函数？

有什么办法可以让它工作吗？

我必须通过丑陋的“onclick”从html标签调用javascript函数
我需要将我的 JS 保存在 document.ready 中（我还需要其他部分）

【问题讨论】：

标签： javascript html

【解决方案1】：

您也可以在 Anchor Tag 中使用带有 javascript: 关键字的 HREF 属性来调用 JavaScript 函数：

<a href="javascript:hello()">click me</a>

【讨论】：

这是一个非常有趣和创造性的解决方案。

【解决方案2】：

您的hello() 函数声明不在全局范围内，因此试图在全局范围内调用它的 HTML 调用找不到它。您可以通过将 hello() 函数移动到全局范围来修复它：

function hello() {
    alert('hi');
}

$(document).ready(function() {
});

或通过在全局范围内声明它：

$(document).ready(function() {
  window.hello = function() {
    alert('hi');
  }
});

【讨论】：

【解决方案3】：

hello 未定义的原因是因为 Hello() 仅存在于 DomReady 回调的上下文中。您需要在全局上下文中定义 Hello()。

【讨论】：

【解决方案4】：

从 $(document).ready() 回调中删除“hello()”。
在“点击”事件回调中调用“hello()”。

<a href="#" id="say_hello">click me</a>

<script type="text/javascript">
$(document).ready(function() {
    $('#say_hello').click(function() {
        hello();
    });
});

function hello() {
    alert('hi');
}
</script>

【讨论】：

你不应该首先使用内联 JS。上面提到的一切都是正确的。
谢谢@HarryJoy。现在我知道了。