从 HTML 中的 onClick 属性调用 jQuery 方法
Posted
技术标签:
【中文标题】从 HTML 中的 onClick 属性调用 jQuery 方法【英文标题】：Calling jQuery method from onClick attribute in HTML 【发布时间】：2011-02-09 23:16:58 【问题描述】：我对在整个系统中实现 JQuery 比较陌生，我很享受这个机会。
我遇到了一个我很想找到正确解决方案的问题。
这是我想做的一个简单案例：
我在页面上有一个按钮，在单击事件上我想调用我定义的 jquery 函数。
这是我用来定义我的方法 (Page.js) 的代码：
(function($)
$.fn.MessageBox = function(msg)
alert(msg);
;
);
这是我的 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>
（上面的代码显示了按钮，但是点击什么也没做。）
我知道我可以在文档就绪事件中添加点击事件，但是将事件放在 HTML 元素中似乎更易于维护。但是我还没有找到方法来做到这一点。
有没有办法在按钮元素（或任何输入元素）上调用 jquery 函数？或者有更好的方法吗？
谢谢
编辑：
感谢您的回复，看来我没有正确使用 JQuery。我真的很想看到一个以这种方式使用 JQuery 的系统示例以及如何处理事件。如果您知道任何示例来证明这一点，请告诉我。
我使用 JQuery 的基本目标是帮助简化和减少大型 Web 应用程序所需的 javascript 数量。
【问题讨论】：
【参考方案1】：我认为没有任何理由将此函数添加到 JQuery 的命名空间中。为什么不自己定义方法：
function showMessage(msg)
alert(msg);
;
<input type="button" value="ahaha" onclick="showMessage('msg');" />
更新：只要对您的方法的定义方式稍作改动，我就可以让它发挥作用：
<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>
【讨论】：
这是一个示例函数，用于演示问题。 OK.. 我已经更新了一个示例，该示例使用您的首选方法 - 无论是作用域还是非作用域。 谢谢@Dexter，效果很好:) 注意版本 1.4.2 可以工作，而 1.3.2 不能工作。【参考方案2】：不要这样做！
不要将事件与元素内联！如果你不这样做，JQuery 的you're missing the point（或者至少是最大的之一）。
以一种方式而不是另一种方式定义 click() 处理程序很容易的原因是，另一种方式根本不可取。由于您只是在学习 JQuery，因此请遵守约定。现在不是 JQuery 在您的学习曲线中决定其他人都做错了并且您有更好的方法的时候！
【讨论】：
嗨@Dave，我并不是说其他人都做错了。我想知道如果不是添加内联事件以将事件添加到单独的 js 文件中的 javascript 函数调用列表中，jquery 如何“简化 javascript”？开发人员如何知道哪些事件是由哪些元素触发的？感谢您的回答，并且真的很想使用（并使用，而不是反对）Jquery。 :) 有几种方法可以做到这一点。您不必拥有单独的 JS 文件。如果需要，您可以将脚本粘贴在文件顶部的 【参考方案3】：您忘记在函数中添加 this ： 改成这样：
<input type="button" value="ahaha" onclick="$(this).MessageBox('msg');" />
【讨论】：
【参考方案4】：这行得通....
<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>
编辑
您正在使用带有 $ 别名的故障安全 jQuery 代码...应该这样写：
(function($)
// plugin code here, use $ as much as you like
)(jQuery);
或
jQuery(function($)
// your code using $ alias here
);
请注意，它的每个单词中都有一个“jQuery”字......
【讨论】：
这是处理这种全局函数暴露的常用/流行方式吗？【参考方案5】：我知道这是很久以前回答的，但如果您不介意动态创建按钮，则仅使用 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>【讨论】：
以上是关于从 HTML 中的 onClick 属性调用 jQuery 方法的主要内容，如果未能解决你的问题，请参考以下文章
为啥我不能从 onclick 属性调用名为 clear 的函数？
jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒