Menu
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.
814
To trigger the onclick function in jQuery, click() method is used. For example, on clicking a paragraph on a document, a click event will be triggered by the $(“p”). click() method. The user can attach a function to a click method whenever an event of a click occurs to run the function.
The click() is an inbuilt method in jQuery that starts the click event or attach a function to run when a click event occurs. Syntax: $(selector). click(function);
In order to access a jQUery function from a JavaScript function, you can declare a variable and assign it to a jQuery function. Finally, just call it from a JavaScript function.
JavaScript functions can be automatically invoked without an event. JavaScript is mainly used for actions on user events like onClick(), onMouseOver() etc. But what if you need to call a JavaScript function without any user events? Answer would be to use the onLoad() of the <body> tag.
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> Don't do this!
Stay away from putting the events inline with the elements! If you don't, you're missing the point of JQuery (or one of the biggest ones at least).
The reason why it's easy to define click() handlers one way and not the other is that the other way is simply not desirable. Since you're just learning JQuery, stick to the convention. Now is not the time in your learning curve for JQuery to decide that everyone else is doing it wrong and you have a better way!
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
