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

Rus*_*ell 25 jquery function

我在整个系统中实现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)


Dav*_*kle 5

不要这样做!

远离将事件与元素内联!如果你不这样做,你就错过了JQuery 的重点(或者至少是最大的重点之一)。

以一种方式而不是另一种方式定义 click() 处理程序很容易的原因是另一种方式根本不受欢迎。由于您只是在学习 JQuery,因此请遵守约定。现在不是在您的学习曲线中让 JQuery 决定其他人都做错了而您有更好的方法的时候!