Question

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

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

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

我在页面上有一个按钮，在click事件上我想调用我定义的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>

（上面的代码显示按钮，但点击什么都不做。）

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

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

由于

编辑：

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

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

Answer 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>

Answer 2

您忘记在功能中添加此：改为：

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

Answer 3

这有效....

<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>

修改

您正在使用$ alias的故障安全jQuery代码......它应该写成：

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

或

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

请注意，它每个都有一个'jQuery'字样....

Answer 4

不要这样做！

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

为什么很容易以一种方式而不是另一种方式定义click（）处理程序的原因是另一种方式根本不可取。因为你刚学习JQuery，所以坚持这个惯例。现在不是你的学习曲线中的时间让JQuery决定其他人做错了你有更好的方法！

Answer 5

我知道很久以前就已经回答了这个问题，但是如果你不介意动态创建按钮，那么这只能使用jQuery框架：

＆＃13;

$(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
  });
});

＆＃13;

<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>

＆＃13;

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

5 个答案: