Calling a user defined function in jQuery

Question

I am trying to call a user defined function in jQuery:

$(document).ready(function() {
  $('#btnSun').click(function() {
    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>

I tried the following as well:

$(document).ready(function() {
  $('#btnSun').click(function() {
    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>

It doesn't seem to work! Any idea where I am wrong?

Solution 1

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>

Solution 2

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>

Solution 3

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();

Solution 4

The following is the right method

$(document).ready(function() {
    $('#btnSun').click(function(){
        $(this).myFunction();
     });
     $.fn.myFunction = function() { 
        alert('hi'); 
     }
});

Solution 5

Try this $('div').myFunction();

This should work

$(document).ready(function() {
 $('#btnSun').click(function(){
  myFunction();
 });

function myFunction()
{
alert('hi');
}

View more solutions

Comments

[user269867]

So is it mean that we can't create user defined function in Jquery and call as we normally do?

[user269867]

Hey it works for me $('div').myFunction(); :-). Gr8 !! Can you help me to understand this behavior ?? why we need $('div').myFunction()... why can't I call myFunction as normal function?

[Daniel A. White]

You are assinging it to the jQuery object.

[bcherry]

because myFunction is not a normal function, it's a property of the jQuery object's prototype, which is why you can call $('div').myFunction(). If you want to just be able to call myFunction, then why not just make a function myFunction (){}?

[Junior Mayhé]

If you need a custom function for an object (eg. a variable), you can use Object.prototype.SayIt = function(s){return this+s;}; var ramone='Hey Ho, '; var s = 'Lets go'; console.log(ramone.SayIt(s));​. If you have trouble, use Object.defineProperty(Object.prototype, "SayIt", {value: function (s) { your stuff here }});

[Amjad]

@Nick Craver can you add parameters to user define function if so how would you use it {function myFunction(val1, val2) { //how would you use it here }} and how would you call the function... thanks

[alikuli]

This didnt work for me. The one by Ruslan López Carro worked (its below.)

[fWd82]

I was trying to waste my time in some stupid thing. I tried every code which is mention here but was unable to even alert(0); it. Was trying to figure out solution and here it was, I pressed F12 and it seems my AdBlocker was blocking some contents from showing up. Read more: Failed to load resource in chrome google.maps api

[Houy Narun]

@NickCraver if myFunction take parameter how do you pass parameter to function myFunction during its call? Thanks