从HTML中的onClick属性调用jQuery方法

前端之家收集整理的这篇文章主要介绍了从HTML中的onClick属性调用jQuery方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在整个系统中实现JQuery是比较新的,我正在享受这个机会。

我遇到一个问题,我想找到正确的决心。

以下是我想做的一个简单案例:

我在页面上有一个按钮,在点击事件我想调用一个我定义的jquery函数

这是我用来定义我的方法(Page.js)的代码

  1. (function($) {
  2. $.fn.MessageBox = function(msg) {
  3. alert(msg);
  4. };
  5. });

这是我的HTML页面

  1. <HTML>
  2. <head>
  3. <script type="text/javascript" src="C:\Sandpit\jQueryTest\jquery-1.3.2.js"></script>
  4. <script language="javascript" src="Page.js"></script>
  5. </head>
  6. <body>
  7. <div class="Title">Welcome!</div>
  8. <input type="button" value="ahaha" onclick="$().MessageBox('msg');" />
  9. </body>
  10. </HTML>

(上面的代码显示的按钮,但点击什么都不做)

我知道我可以在文档就绪事件中添加点击事件,但是将事件放在HTML元素中似乎更易于维护。但是我没有找到办法来做到这一点。

有没有办法在按钮元素(或任何输入元素)上调用jquery函数?还是有更好的方法呢?

谢谢

编辑:

谢谢你的回复,看来我没有正确使用JQuery。我真的很想看到一个使用JQuery的系统的例子,并且如何处理事件。如果你知道任何示例来证明这一点,请让我知道。

我使用JQuery的基本目标是帮助简化和减少大型Web应用程序所需的JavaScript数量

解决方法

我不认为有任何理由将此函数添加到JQuery的命名空间。为什么不自己定义方法呢?
  1. function showMessage(msg) {
  2. alert(msg);
  3. };
  4.  
  5. <input type="button" value="ahaha" onclick="showMessage('msg');" />

更新:对于如何定义方法的一个小小的改变,我可以让它工作:

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4. <script language="javascript">
  5. // define the function within the global scope
  6. $.fn.MessageBox = function(msg) {
  7. alert(msg);
  8. };
  9.  
  10. // or,if you want to encapsulate variables within the plugin
  11. (function($) {
  12. $.fn.MessageBoxScoped = function(msg) {
  13. alert(msg);
  14. };
  15. })(jQuery); //<-- make sure you pass jQuery into the $ parameter
  16. </script>
  17. </head>
  18. <body>
  19. <div class="Title">Welcome!</div>
  20. <input type="button" value="ahaha" id="test" onClick="$(this).MessageBox('msg');" />
  21. </body>
  22. </html>

猜你在找的HTML相关文章