在 JSFiddle 中，具体什么会成功触发 JavaScript click 事件？

Question

我一直在尝试让按钮点击事件在单击特定按钮后 JavaScript 代码触发某些事件的地方工作。

当我尝试在我的项目中执行点击触发器时没有任何问题，但我似乎无法使用 JSFiddle 让它工作。

我首先按照这里的提示进行操作：JavaScript not running on jsfiddle.net

具体来说，meder omuraliev 写道，“所以

<p onclick="lol()" id="foo">

你会做

var e = document.getElementById('foo'); 
e.onclick = lol;

仅在 JS 中。

我试图按照我在此处制作的简单示例中看到的说明进行操作（无效）：https://jsfiddle.net/b7yj3cph/3/

var e = document.getElementById('test');
e.onclick = example;

var example = function( {
    alert("hello");
});

<button id='test' type="button" onclick="example()">
  <div>
  Hello
  </div>

我尝试了其他来源和方法，但无法正常工作。我尝试了一个来自 W3Schools (https://jsfiddle.net/b7yj3cph/) and tried some JSFiddles from searching "jsfiddle button onclick" (https://jsfiddle.net/Dogbyte/62cd0LLq/) 的例子，但有些例子不起作用。

但有些人做到了；像这个 (http://jsfiddle.net/lesson8/h4JXs/1/) 似乎工作正常。

是什么让点击触发器对某些 JSFiddle 起作用而对其他 JSFiddle 不起作用？我怀疑它与 $(document).ready() 部分有关，但我一直在阅读各种方法来让它工作，但我找不到任何对我有意义的东西。

回到我之前分享的 Stack Overflow 线程，那里投票最高的回复有 3 个建议：

"（最简单、最快、不理想）- 将 function blah(){} 更改为 window.blah = function(){}；使函数成为全局函数。"

好吧，在此处发布的按预期工作的 JSFiddle 中，没有使用 window。我尝试使用 window 被证明是徒劳的。

"（理想方式）- 使用不显眼的 Javascript 仅从 JS 中将行为附加到 DOM 元素，这意味着将 HTML 与 JS."

这是一个很好的观点并且有道理，但仍然没有解决我的问题问题。

"Make the jsfiddle not wrap the stuff onload. Change onLoad to no wrap ( body or head )."

我的具体示例没有包含在 onLoad 中（至少，我认为不是）。无论如何，谢谢！

Answer 1

您的 fiddle 中有两个问题：

首先你的example函数声明不正确：

var e = document.getElementById('test');
e.onclick = example;

var example = function( { // parenthasis should be closed before opening braces
    alert("hello");
});

应该是：

var e = document.getElementById('test');
e.onclick = example;

var example = function() {
    alert("hello");
}

其次，您在被解释为的 onclick 赋值下方声明 var example：

e.onclick = undefined

只需将 var example 移到 e.onclick 上方并修复语法问题即可：

var e = document.getElementById('test');
var example = function() {
    alert("hello");
}
e.onclick = example;

Answer 2

This is the way 如果您不想等待 DOM 加载。

document.getElementById('btnSave').addEventListener('click',() => {
    alert('clicked the damn button!');
});

将某些内容附加到 .onclick 不起作用的原因是，为此，您必须等待 DOM 加载；在这种情况下，操作顺序非常重要。

在 JSFiddle 中，具体什么会成功触发 JavaScript click 事件？

What specifically will successfully trigger a JavaScript click event in JSFiddle?

html

javascript

jquery

jsfiddle