代码之家 › 专栏 › 技术社区 › Russell

从HTML中的onclick属性调用jquery方法

function jquery

Russell · 技术社区 · 16 年前

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

(以上代码显示按钮,但单击不做任何操作。)

我知道我可以将click事件添加到document ready事件中,但是将事件放在html元素中似乎更容易维护。然而,我还没有找到一种方法来做到这一点。

是否有方法调用按钮元素(或任何输入元素)上的jquery函数?或者有更好的方法吗?

谢谢

编辑:

感谢您的回复,似乎我没有正确使用jquery。我非常希望看到一个使用jquery的系统的例子,以及如何处理事件。如果你知道任何证明这一点的例子,请告诉我。

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

5 回复 | 直到 9 年前

Dexter 16 年前

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

Puaka 16 年前

你忘了添加这在您的职能范围内: 更改为:

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

Reigel Gallarde 16 年前

这是可行的……

<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”字……

Dave Markle 16 年前

别这样!

不要将事件与元素放在一起!如果你不这样做, you're missing the point jquery(至少是最大的一个)。

一种方法而不是另一种方法很容易定义click()处理程序的原因是另一种方法根本不可取。既然您只是在学习jquery,那么请遵守约定。现在不是时候在你的学习曲线中让jquery决定其他人做错事了,你有更好的方法了!

Victor Stoddard 9 年前

我知道这是很久以前的答案,但是如果您不介意动态创建按钮,那么这只使用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>