Calling a user defined function in jQuery
They are called plugins, as Jaboc commented. To make sense, plugin function should do something with the element it is called through. Consider the following:
jQuery.fn.make_me_red = function() {
return this.each(function() {
this.style.color = 'red';
});
};
$('a').make_me_red();
If you want to call a normal function via a jQuery event, you can do it like this:
$(document).ready(function() {
$('#btnSun').click(myFunction);
});
function myFunction() {
alert('hi');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSun">Say hello!</button>
Just try this. It always works.
$(document).ready(function() {
$('#btnSun').click(function() {
$.fn.myFunction();
});
$.fn.myFunction = function() {
alert('hi');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSun">Say hello!</button>