从 HTML 中的 onClick 属性调用 jQuery 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2672355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling jQuery method from onClick attribute in HTML
提问by Russell
I am relatively new to implementing JQuery throughout an entire system, and I am enjoying the opportunity.
我对在整个系统中实现 JQuery 比较陌生，我很享受这个机会。
I have come across one issue I would love to find the correct resolve for.
我遇到了一个问题，我很想找到正确的解决方案。
Here is a simple case example of what I want to do:
这是我想要做的一个简单的案例示例：
I have a button on a page, and on the click event I want to call a jquery function I have defined.
我在页面上有一个按钮，在单击事件上我想调用我定义的 jquery 函数。
Here is the code I have used to define my method (Page.js):
这是我用来定义我的方法 (Page.js) 的代码：
(function($) {
$.fn.MessageBox = function(msg) {
alert(msg);
};
});
And here is my HTML page:
这是我的 HTML 页面：
<HTML>
<head>
<script type="text/javascript" src="C:\Sandpit\jQueryTest\jquery-1.3.2.js"></script>
<script language="javascript" src="Page.js"></script>
</head>
<body>
<div class="Title">Welcome!</div>
<input type="button" value="ahaha" onclick="$().MessageBox('msg');" />
</body>
</HTML>
(The above code displays the button, but clicking does nothing.)
（上面的代码显示按钮，但点击什么都不做。）
I am aware I could add the click event in the document ready event, however it seems more maintainable to put events in the HTML element instead. However I have not found a way to do this.
我知道我可以在文档就绪事件中添加 click 事件，但是将事件放在 HTML 元素中似乎更易于维护。但是，我还没有找到一种方法来做到这一点。
Is there a way to call a jquery function on a button element (or any input element)? Or is there a better way to do this?
有没有办法在按钮元素（或任何输入元素）上调用 jquery 函数？或者有没有更好的方法来做到这一点？
Thanks
谢谢
EDIT:
编辑：
Thank you for your responses, it appears I am not using JQuery correctly. I would really love to see an example of a system using JQuery this way and how events are handled. If you know of any examples to demonstrate this please let me know.
感谢您的回复，看来我没有正确使用 JQuery。我真的很想看到一个以这种方式使用 JQuery 的系统示例以及如何处理事件。如果您知道任何示例来证明这一点，请告诉我。
My underlying goal for using JQuery is to help simplify and reduce the amount of javascript required for a large-scale web application.
我使用 JQuery 的基本目标是帮助简化和减少大型 Web 应用程序所需的 javascript 数量。
回答by Dexter
I don't think there's any reason to add this function to JQuery's namespace. Why not just define the method by itself:
我认为没有任何理由将此函数添加到 JQuery 的命名空间中。为什么不自己定义方法：
function showMessage(msg) {
alert(msg);
};
<input type="button" value="ahaha" onclick="showMessage('msg');" />
UPDATE: With a small change to how your method is defined I can get it to work:
更新：通过对您的方法的定义方式稍作更改，我可以让它工作：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
// define the function within the global scope
$.fn.MessageBox = function(msg) {
alert(msg);
};
// or, if you want to encapsulate variables within the plugin
(function($) {
$.fn.MessageBoxScoped = function(msg) {
alert(msg);
};
})(jQuery); //<-- make sure you pass jQuery into the $ parameter
</script>
</head>
<body>
<div class="Title">Welcome!</div>
<input type="button" value="ahaha" id="test" onClick="$(this).MessageBox('msg');" />
</body>
</html>
回答by Puaka
you forgot to add thisin your function : change to this :
你忘了在你的函数中添加这个：更改为：
<input type="button" value="ahaha" onclick="$(this).MessageBox('msg');" />
回答by Reigel
this works....
这有效....
<script language="javascript">
(function($) {
$.fn.MessageBox = function(msg) {
return this.each(function(){
alert(msg);
})
};
})(jQuery);?
</script>
.
.
<body>
<div class="Title">Welcome!</div>
<input type="button" value="ahaha" onclick="$(this).MessageBox('msg');" />
</body>
edit
编辑
you are using a failsafe jQuery code using the $ alias... it should be written like:
您正在使用使用 $ 别名的故障安全 jQuery 代码......它应该写成：
(function($) {
// plugin code here, use $ as much as you like
})(jQuery);
or
或者
jQuery(function($) {
// your code using $ alias here
});
note that it has a 'jQuery' word in each of it....
请注意，它的每个中都有一个“jQuery”字....
回答by Dave Markle
Don't do this!
不要这样做！
Stay away from putting the events inline with the elements! If you don't, you're missing the pointof JQuery (or one of the biggest ones at least).
远离将事件与元素内联！如果你不这样做，你就错过了JQuery 的重点（或者至少是最大的重点之一）。
The reason why it's easy to define click() handlers one way and not the other is that the other way is simply not desirable. Since you're just learning JQuery, stick to the convention. Now is not the time in your learning curve for JQuery to decide that everyone else is doing it wrong and you have a better way!
以一种方式而不是另一种方式定义 click() 处理程序很容易的原因是另一种方式根本不受欢迎。由于您只是在学习 JQuery，因此请遵守约定。现在不是在您的学习曲线中让 JQuery 决定其他人都做错了而您有更好的方法的时候！
回答by Victor Stoddard
I know this was answered long ago, but if you don't mind creating the button dynamically, this works using only the jQuery framework:
我知道这是很久以前的回答，但如果你不介意动态创建按钮，这仅适用于 jQuery 框架：
$(document).ready(function() {
$button = $('<input id="1" type="button" value="ahaha" />');
$('body').append($button);
$button.click(function() {
console.log("Id clicked: " + this.id ); // or $(this) or $button
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>And here is my HTML page:</p>
<div class="Title">Welcome!</div>