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.
I know this was answered long ago, but if you don't mind creating the button dynamically, this works using only the jQuery framework:
$(document).ready(function() {_x000D_
$button = $('<input id="1" type="button" value="ahaha" />');_x000D_
$('body').append($button);_x000D_
$button.click(function() {_x000D_
console.log("Id clicked: " + this.id ); // or $(this) or $button_x000D_
});_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<p>And here is my HTML page:</p>_x000D_
_x000D_
<div class="Title">Welcome!</div>you forgot to add this in your function : change to this :
<input type="button" value="ahaha" onclick="$(this).MessageBox('msg');" />
this works....
<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>
edit
you are using a failsafe jQuery code using the $ alias... it should be written like:
(function($) {
// plugin code here, use $ as much as you like
})(jQuery);
or
jQuery(function($) {
// your code using $ alias here
});
note that it has a 'jQuery' word in each of it....
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!
Source: Stackoverflow.com