Calling jQuery method from onClick attribute in HTML

Posted by Russell on Stack Overflow See other posts from Stack Overflow or by Russell
Published on 2010-04-20T03:35:39Z Indexed on 2010/04/20 3:43 UTC
Read the original article Hit count: 259

Filed under:
|

I am relatively new to implementing JQuery throughout an entire system, and I am enjoying the opportunity.

I have come across one issue I would love to find the correct resolve for.

Here is a simple case example of what I want to do:

I have a button on a page, and on the click event I want to call a jquery function I have defined.

Here is the code I have used to define my method (Page.js):

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

And here is my HTML page:

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

(The above code displays the button, but clicking does nothing.)

I am aware I could add the click event in the document ready event, however it seems more maintainable to put events in the HTML element instead. However I have not found a way to do this.

Is there a way to call a jquery function on a button element (or any input element)? Or is there a better way to do this?

Thanks

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about function