从HTML中的onClick属性调用jQuery方法 [英] Calling jQuery method from onClick attribute in HTML
问题描述
我在整个系统中实现JQuery相对较新，我很享受这个机会。
我遇到过一个我很想找到正确的问题解决。
下面是我想要做的一个简单的例子：
我有一个按钮在一个页面上，并在点击事件我想调用我定义的jquery函数。
下面是我用来定义我的方法（Page.js）的代码：
（function（$）{
$ .fn.MessageBox = function（msg）{
alert（msg）;
};
}）;
这里是我的HTML页面：
< HTML>
< head>
< script type =text / javascriptsrc =C：\Sandpit\jQueryTest\jquery-1.3.2.js>< / script>
< script language =javascriptsrc =Page.js>< / script>
< / head>
< body>
< div class =Title>欢迎！< / div>
< input type =buttonvalue =ahahaonclick =$（）。MessageBox（'msg'）; />
< / body>
< / HTML>
（上面的代码显示按钮，但点击不会执行任何操作。）
我知道我可以在文档就绪事件中添加click事件，但是将事件放入HTML元素似乎更易于维护。但我还没有找到一种方法来做到这一点。
有没有办法在按钮元素（或任何输入元素）上调用jquery函数？还是有更好的方法来做到这一点？
谢谢
编辑：
感谢您的回复，看来我没有正确使用JQuery。我真的很想看到以这种方式使用JQuery的系统示例以及如何处理事件。如果你知道任何示例来证明这一点，请让我知道。
使用JQuery的基本目标是帮助简化和减少大型应用程序所需的javascript数量，我认为没有任何理由将此函数添加到JQuery的名称空间。我不认为有任何理由将此函数添加到JQuery的名称空间中。为什么不只是自己定义方法：
function showMessage（msg）{
alert（msg）;
};
< input type =buttonvalue =ahahaonclick =showMessage（'msg'）; />
更新：如果您对方法的定义做了小改动，我可以得到它的工作：
< html>
< head>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js>< / script>
< script language =javascript>
//在全局范围内定义函数
$ .fn.MessageBox = function（msg）{
alert（msg）;
};
//或者，如果你想在插件
中封装变量（函数（$）{
$ .fn.MessageBoxScoped = function（msg）{
alert（msg）;
};
}）（jQuery）; //< - 确保您将jQuery传入$参数
< / script>
< / head>
< body>
< div class =Title>欢迎！< / div>
< input type =buttonvalue =ahahaid =testonClick =$（this）.MessageBox（'msg'）; />
< / body>
< / html>
I am relatively new to implementing JQuery throughout an entire system, and I am enjoying the opportunity.
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.
Here is the code I have used to define my method (Page.js):
(function($) {
$.fn.MessageBox = function(msg) {
alert(msg);
};
});
And here is my HTML page:
<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.
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?
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.
My underlying goal for using JQuery is to help simplify and reduce the amount of javascript required for a large-scale web application.
I don't think there's any reason to add this function to JQuery's namespace. Why not just define the method by itself:
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>
这篇关于从HTML中的onClick属性调用jQuery方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
