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

【问题标题】：Calling jQuery method from onClick attribute in HTML从 HTML 中的 onClick 属性调用 jQuery 方法
【发布时间】：2011-02-09 23:16:58
【问题描述】：

我对在整个系统中实现 JQuery 比较陌生，我很享受这个机会。

我遇到了一个我很想找到正确解决方案的问题。

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

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

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

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

这是我的 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>

（上面的代码显示了按钮，但是点击什么也没做。）

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

有没有办法在按钮元素（或任何输入元素）上调用 jquery 函数？或者有更好的方法吗？

谢谢

编辑：

感谢您的回复，看来我没有正确使用 JQuery。我真的很想看到一个以这种方式使用 JQuery 的系统示例以及如何处理事件。如果您知道任何示例来证明这一点，请告诉我。

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

【问题讨论】：

标签： jquery function

【解决方案1】：

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

【讨论】：

这是一个示例函数，用于演示问题。
OK.. 我已经更新了一个示例，该示例使用您的首选方法 - 无论是作用域还是非作用域。
谢谢@Dexter，效果很好:) 注意版本 1.4.2 可以工作，而 1.3.2 不能工作。

【解决方案2】：

不要这样做！

不要将事件与元素内联！如果你不这样做，JQuery 的you're missing the point（或者至少是最大的之一）。

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

【讨论】：

嗨@Dave，我并不是说其他人都做错了。我想知道如果不是添加内联事件以将事件添加到单独的 js 文件中的 javascript 函数调用列表中，jquery 如何“简化 javascript”？开发人员如何知道哪些事件是由哪些元素触发的？感谢您的回答，并且真的很想使用（并使用，而不是反对）Jquery。 :)
有几种方法可以做到这一点。您不必拥有单独的 JS 文件。如果需要，您可以将脚本粘贴在文件顶部的

【解决方案3】：

您忘记在函数中添加 this ：改成这样：

<input type="button" value="ahaha"  onclick="$(this).MessageBox('msg');" />

【讨论】：

【解决方案4】：

这行得通....

<script language="javascript">
    (function($) {
     $.fn.MessageBox = function(msg) {
       return this.each(function(){
         alert(msg);
       })
     };
    })(jQuery); 
</script>

.

   <body>
      <div class="Title">Welcome!</div>
     <input type="button" value="ahaha"  onclick="$(this).MessageBox('msg');" />
    </body>

编辑

您正在使用带有 $ 别名的故障安全 jQuery 代码...应该这样写：

(function($) {
  // plugin code here, use $ as much as you like
})(jQuery);

或

jQuery(function($) {
   // your code using $ alias here
 });

请注意，它的每个单词中都有一个“jQuery”字......

【讨论】：

这是处理这种全局函数暴露的常用/流行方式吗？

【解决方案5】：

我知道这是很久以前回答的，但如果您不介意动态创建按钮，则仅使用 jQuery 框架即可：

$(document).ready(function() {
  $button = $('<input id="1" type="button" value="ahaha" />');
  $('body').append($button);
  $button.click(function() {
    console.log("Id clicked: " + this.id ); // or $(this) or $button
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>And here is my HTML page:</p>

<div class="Title">Welcome!</div>

【讨论】：