Home/ Questions/Q 736045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T07:33:35+00:00

I am relatively new to implementing JQuery throughout an entire system, and I am

  • 0

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

EDIT:

Thank you for your responses, it appears I am not using JQuery correctly. I would really love to see an example of a system using JQuery this way and how events are handled. If you know of any examples to demonstrate this please let me know.

My underlying goal for using JQuery is to help simplify and reduce the amount of javascript required for a large-scale web application.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t think there’s any reason to add this function to JQuery’s namespace. Why not just define the method by itself:

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

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

    UPDATE: With a small change to how your method is defined I can get it to work:

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