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

发布时间：2020-12-14 22:25:20 所属栏目：资源来源：网络整理

导读：我在整个系统中实现JQuery是比较新的，我正在享受这个机会。我遇到一个问题，我想找到正确的决心。以下是我想做的一个简单案例：我在页面上有一个按钮，在点击事件我想调用一个我定义的jquery函数。这是我用来定义我的方法(Page.js)的代码： (function($

我在整个系统中实现JQuery是比较新的，我正在享受这个机会。

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

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

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

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

(function($) {
 $.fn.MessageBox = function(msg) {
  alert(msg);
 };
});

这是我的HTML页面：

<HTML>
<head>
 <script type="text/javascript" src="C:SandpitjQueryTestjquery-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数量。

解决方法

我不认为有任何理由将此函数添加到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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!