简体   繁体   English

按钮上的Click事件似乎未触发

[英]Click event on button doesn't seem to fire

I'm not new to HTML or JavaScript, though I don't use them often. 尽管我不经常使用HTML或JavaScript,但我并不陌生。 I am, however, very new to PHP, and am currently facing a weird issue when trying to get a click event on a button in my HTML which is imbedded in PHP: 但是,我对PHP还是很陌生,并且在尝试获取嵌入在PHP中的HTML中的按钮上的click事件时,当前面临一个奇怪的问题:

 <!DOCTYPE html> <html lang="de"> <head> <title>Blah</title> <meta charset="utf-8"> </head> <body> <button type="button" onclick="function() { alert('Moo!'); }">Some button</button> </body> </html> 

Nothing happens when I click on the button. 当我单击按钮时,什么也没有发生。 Yes, there's of course more markup in the original, but it's not relevant to my question. 是的,原件中当然会有更多标记,但这与我的问题无关。 The W3C markup validation service says there are no errors, and when I alert moo from a script at the bottom of the body tag it works fine as well. W3C标记验证服务表示没有错误,并且当我从body标签底部的脚本中警告moo时,它也可以正常工作。 It looks like the click event doesn't fire... Any idea why? 看来click事件没有触发...知道为什么吗?

It is because you define a function and do not execute it. 这是因为您定义了一个函数而不执行它。 Do not wrap it in a function. 不要将其包装在函数中。

onclick="alert('Moo!');"

If you wrap it in a function. 如果将其包装在函数中。 you would need to execute it. 您将需要执行它。

onclick="(function() { alert('Moo!'); })()"

The issue is your anonymous function syntax. 问题是您的匿名函数语法。 You're using a function definition, but you're not immediately invoking it, or giving it a name, so the browser doesn't have anything to do with it. 您正在使用函数定义,但没有立即调用它或给它命名,因此浏览器与它没有任何关系。

If you want it immediately invoked when clicked you might try rewriting the button section like this: 如果您希望单击后立即调用它,则可以尝试重写按钮部分,如下所示:

<button type="button" onclick="(function() { alert('Moo!'); })();">Some button</button>

But my personal preference would be to write it into a named function and call it as the handler instead. 但我个人的喜好是将其写入命名函数,然后将其称为处理程序。

You can't have anonymous functions in the inline event handler - use alert("Moo") 内联事件处理程序中不能包含匿名函数-使用alert("Moo")

 <!DOCTYPE html> <html lang="de"> <head> <title>Blah</title> <meta charset="utf-8"> </head> <body> <button type="button" onclick="alert('Moo!')">Some button</button> </body> </html> 

You could also use a named function: 您还可以使用命名函数:

 function moo() { alert("Moo!"); } 
 <!DOCTYPE html> <html lang="de"> <head> <title>Blah</title> <meta charset="utf-8"> </head> <body> <button type="button" onclick="moo()">Some button</button> </body> </html> 

And even an IIFE: 甚至是IIFE:

 <!DOCTYPE html> <html lang="de"> <head> <title>Blah</title> <meta charset="utf-8"> </head> <body> <button type="button" onclick="(function() { alert('Moo!'); })()">Some button</button> </body> </html> 

You can bind actions in onclick attribute in 3 ways: 您可以通过3种方式在onclick属性中绑定动作:

  1. <button type="button" onclick="alert('Moo!');">Some button</button>
  2. Make a function in JS code. 用JS代码创建函数。 <button type="button" onclick="someFunc()">Some button</button>
  3. Using closures : <button type="button" onclick="(function() { alert('Moo!'); })()">Some button</button> 使用闭包<button type="button" onclick="(function() { alert('Moo!'); })()">Some button</button>

` `

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM