从HTML中onClick属性调用jQuery方法

我在贯穿整个系统实现JQuery方面比较新，我很享受这个机会。从HTML中onClick属性调用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事件，但是看起来更容易将事件放入HTML元素中。但是我还没有找到办法做到这一点。

有没有办法在按钮元素（或任何输入元素）上调用jquery函数？还是有更好的方法来做到这一点？

感谢

编辑：

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

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

来源

2010-04-20 Russell

我不认为有任何理由将此函数添加到JQuery的名称空间。为什么不只是由其自身确定的方法：

function showMessage(msg) { 
    alert(msg); 
}; 

<input type="button" value="ahaha" onclick="showMessage('msg');" />

UPDATE：一个小的改变如何你的方法是指我可以得到它的工作：

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

来源

2010-04-20 03:40:06 Dexter

这是一个示范作用，来展示问题。 – Russell 2010-04-20 03:44:46

行..我已经更新了一个例子，它使用你喜欢的方法工作 - 无论是有限还是无限。 – Dexter 2010-04-20 04:07:42

谢谢@Dexter，这工作得很好:)注意版本1.4.2的作品，而1.3.2不会工作。 – Russell 2010-04-20 04:31:10

你忘了加这在你的函数：改成这样：

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

来源

2010-04-20 03:45:07 Puaka

这仍然不起作用。 :( – Russell 2010-04-20 03:50:25

这不起作用..至少在我的测试 – Dexter 2010-04-20 03:50:45

这个工程....

<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的' 字....

来源

2010-04-20 04:03:38 Reigel

嗨@Reigel，谢谢。这是我正在寻找:) – Russell 2010-04-20 04:08:03

这是一种常见的/流行的方式来处理这种全球性的功能暴露？ – Russell 2010-04-20 04:08:26

请参阅编辑 – Reigel 2010-04-20 04:13:36

不要这样做！

远离事件的内容与元素！如果你没有，JQuery的you're missing the point（或者至少是最大的一个）。

为什么很容易以一种方式定义click（）处理程序，而不是另一种方式是因为另一种方式根本不可取。由于您只是在学习JQuery，所以请遵守惯例。现在不是JQuery决定其他人做错了，你有更好的方法的时候了！

来源

2010-04-20 04:17:44

嗨@Dave，我不是说所有人都做错了。我想知道如何jquery可以“简化JavaScript”，而不是添加事件内联添加事件到一个单独的js文件中的javascript函数调用列表？开发人员将如何知道哪些元素会触发哪些事件？我很感谢你的回答，并且真的很喜欢使用（并且不是针对）Jquery。 :) – Russell 2010-04-20 05:15:20

有几种方法可以做到这一点。您不必拥有单独的JS文件。如果您愿意，您可以将脚本粘贴到文件顶部的

我知道这是很久以前回答，但如果你不介意创建按钮动态，这个作品只使用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>

来源

2017-04-26 22:48:19

从HTML中onClick属性调用jQuery方法

回答

相关问题