在HTML标签内调用JavaScript函数

Question

我有以下内容。

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

我有一个 JavaScript 文件

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

但是当我点击"click me"时，警告框没有被触发。它说"hello"没有定义。当我移除 document.ready 后，它就可以工作。

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

有没有办法让这个工作？

• 我必须通过丑陋的 "onclick" 从 HTML 标签中调用 JavaScript 函数。
• 我需要将我的 JS 放在 document.ready 内（我还需要其他部分）。

- ericbae

Answer 1

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

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

- Azadeh Radkianpour

---

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

Answer 2

你的 hello() 函数声明不在全局作用域中，因此来自 HTML 的调用尝试在全局作用域中调用它时找不到它。你可以将 hello() 函数移入全局作用域来修复这个问题：

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

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

或者在全局范围内声明它：

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

- jfriend00

Answer 3

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

- Frank Rosario

Answer 4

1. 从 $(document).ready() 回调函数中移除 "hello()"。
2. 在 "click" 事件回调函数中调用 "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>

- Ayman Safadi

---

你本来就不应该使用内联JS。上面的人提到的一切都是正确的。 - Ayman Safadi