小开

最佳答案

永远不要使用 .onclick()或来自用户脚本的类似属性! (它也是在常规网页上的不良操作)。

原因是用户脚本在沙箱(“隔离世界”)中运行，而 onclick在目标页范围中运行，不能看到脚本创建的任何函数。

始终使用 addEventListener() < sup > Doc (或等效的库函数，如 jQuery。在())。

所以不要用这样的代码:

something.outerHTML += '<input onclick="resetEmotes()" id="btnsave" ...>'

你会用:

something.outerHTML += '<input id="btnsave" ...>'


document.getElementById ("btnsave").addEventListener ("click", resetEmotes, false);

对于循环，不能将数据传递给类似于医生的事件侦听器。另外，每次像这样更改 innerHTML，都会破坏以前的事件侦听器！

不需要重构代码，就可以使用数据属性传递数据:

for (i = 0; i < EmoteURLLines.length; i++) {
if (checkIMG (EmoteURLLines[i])) {
localStorage.setItem ("nameEmotes", JSON.stringify (EmoteNameLines));
localStorage.setItem ("urlEmotes", JSON.stringify (EmoteURLLines));
localStorage.setItem ("usageEmotes", JSON.stringify (EmoteUsageLines));
if (i == 0) {
console.log (resetSlot ());
}
emoteTab[2].innerHTML  += '<span style="cursor:pointer;" id="'
+ EmoteNameLines[i]
+ '" data-usage="' + EmoteUsageLines[i] + '">'
+ '<img src="' + EmoteURLLines[i] + '" /></span>'
;
} else {
alert ("The maximum emote (" + EmoteNameLines[i] + ") size is (36x36)");
}
}
//-- Only add events when innerHTML overwrites are done.
var targetSpans = emoteTab[2].querySelectorAll ("span[data-usage]");
for (var J in targetSpans) {
targetSpans[J].addEventListener ("click", appendEmote, false);
}

阑尾表情是这样的:

function appendEmote (zEvent) {
//-- this and the parameter are special in event handlers.  see the linked doc.
var emoteUsage  = this.getAttribute ("data-usage");
shoutdata.value += emoteUsage;
}

警告:

您的代码对几个元素重用相同的 id。别这样，这是无效的。给定的 ID 应该每页只出现一次。
每次使用 .outerHTML或 .innerHTML时，都会清除受影响节点上的任何事件处理程序。如果你使用这个方法，要小心这个事实。

小开

我在 Vue 中通过将 onclick="someFunction()"切换到 @click="someFunction"来解决这个问题。

小开

如果在 html 中使用这个函数时没有定义函数，比如 onclick = ‘ function ()’，那么这意味着函数在回调中，在我的例子中是‘ DOMContentLoade’。

小开

确保您正在使用 Javascript 模块还是没有? ！ if using js6 modules your html events attributes won't work. 在这种情况下，必须将函数从全局作用域调用到模块作用域。只要把这个添加到你的 javascript 文件: window.functionName= functionName;

例如:

<h1 onClick="functionName">some thing</h1>

小开

我认为你把函数放在 $(文档) . ready... ... 。 The functions are always provided out the $(document).ready.......

小开

我用特定组件的.html 文件中的 (click) = "someFuncionName()"角度解析了这个问题。

小开

如果使用的是外部 js 文件，请确保函数不在回调函数中。删除回调函数就可以解决这个问题

(function() {  //comment this out


//your code


})(); //comment this out

小开

检查你的功能外壳。

onclick="sillyLongFunctionName"

还有

函数 sillylongFunctionName (){ ..。

Are not identical. Hard to spot sometimes!

未捕获的 ReferenceError: 函数没有用 onclick 定义

更新

警告: