我在整个系统中实现JQuery相对较新,我很享受这个机会.
我遇到过一个我很想找到正确决心的问题.
以下是我想要做的简单案例:
我在页面上有一个按钮,在click事件上我想调用我定义的jquery函数.
这是我用来定义我的方法(Page.js)的代码:
(function($) {
$.fn.MessageBox = function(msg) {
alert(msg);
};
});
Run Code Online (Sandbox Code Playgroud)
这是我的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>
Run Code Online (Sandbox Code Playgroud)
(上面的代码显示按钮,但点击什么都不做.)
我知道我可以在文档就绪事件中添加click事件,但是将事件放在HTML元素中似乎更易于维护.但是我还没有办法做到这一点.
有没有办法在按钮元素(或任何输入元素)上调用jquery函数?或者有更好的方法吗?
谢谢
编辑:
感谢您的回复,看来我没有正确使用JQuery.我真的很想看到一个以这种方式使用JQuery的系统示例以及如何处理事件.如果您知道任何示例来证明这一点,请告诉我.
我使用JQuery的基本目标是帮助简化和减少大规模Web应用程序所需的javascript数量.
Dex*_*ter 28
我认为没有任何理由将此函数添加到JQuery的命名空间.为什么不单独定义方法:
function showMessage(msg) {
alert(msg);
};
<input type="button" value="ahaha" onclick="showMessage('msg');" />
Run Code Online (Sandbox Code Playgroud)
更新:通过对方法定义的小改动,我可以让它工作:
<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>
Run Code Online (Sandbox Code Playgroud)
小智 5
您忘记在函数中添加此内容:更改为:
<input type="button" value="ahaha" onclick="$(this).MessageBox('msg');" />
Run Code Online (Sandbox Code Playgroud)