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?

just a remark, since you are using $.fn.myFunction, in most cases you are telling that you want to use this function over a valid wrapped jquery object, eg. $('your_html_tag').myFunction(). jsfiddle.net/H7z8f — Junior Mayhe
– Junior Mayhe, Commented Sep 23, 2012 at 14:32

Ruslan López · Accepted Answer · 2015-05-22 22:30:31Z

89

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>

edited May 22, 2015 at 22:30

Ruslan López

4,4752 gold badges30 silver badges40 bronze badges

answered Mar 26, 2010 at 0:29

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Junior Mayhe Over a year ago

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 Over a year ago

@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 Over a year ago

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

Houy Narun Over a year ago

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

Ruslan López · Accepted Answer · 2015-05-22 22:28:36Z

39

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>

edited May 22, 2015 at 22:28

Ruslan López

4,4752 gold badges30 silver badges40 bronze badges

answered Dec 7, 2010 at 12:30

neeraj

3913 silver badges2 bronze badges

1 Comment

fWd82 Over a year ago

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

jholster · Accepted Answer · 2010-03-26 00:03:47Z

12

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

answered Mar 26, 2010 at 0:03

jholster

5,1361 gold badge29 silver badges21 bronze badges

Comments

sjngm · Accepted Answer · 2012-01-11 06:33:09Z

10

The following is the right method

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

edited Jan 11, 2012 at 6:33

sjngm

13k16 gold badges90 silver badges118 bronze badges

answered Jan 11, 2012 at 6:20

CreativeMirage

1011 silver badge2 bronze badges

Comments

genesis · Accepted Answer · 2011-09-08 14:05:23Z

8

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

This should work

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

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

edited Sep 8, 2011 at 14:05

genesis

51.1k20 gold badges99 silver badges127 bronze badges

answered Mar 25, 2010 at 23:30

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

4 Comments

user269867 Over a year ago

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

user269867 Over a year ago

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 Over a year ago

You are assinging it to the jQuery object.

bcherry Over a year ago

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 (){}?

genesis · Accepted Answer · 2011-09-08 14:05:50Z

5

jQuery.fn.make_me_red = function() {
    return this.each(function() {
        this.style.color = 'red';
    });
};

$('a').make_me_red() // - instead of this you can use $(this).make_me_red() instead for better readability.

edited Sep 8, 2011 at 14:05

genesis

51.1k20 gold badges99 silver badges127 bronze badges

answered Mar 29, 2010 at 9:35

dbrainer

511 bronze badge

Comments

Abhishek Prabhakar · Accepted Answer · 2013-07-15 14:43:25Z

2

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

      myFunction();

   });

   $.fn.myFunction = function() { 
     alert('hi'); 

    }; 
});

Put ' ; ' after function definition...

answered Jul 15, 2013 at 14:43

Abhishek Prabhakar

411 silver badge7 bronze badges

Comments

Mihai Iorga · Accepted Answer · 2012-09-28 11:16:01Z

1

jQuery.fn.make_me_red = function() {
    alert($(this).attr('id'));
    $(this).siblings("#hello").toggle();
}
$("#user_button").click(function(){
    //$(this).siblings(".hello").make_me_red(); 
    $(this).make_me_red(); 
    $(this).addClass("active");
});

Function declaration and callback in jQuery.

edited Sep 28, 2012 at 11:16

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

answered Aug 29, 2012 at 12:20

Kamalpreet

111 bronze badge

Comments

Rinzler · Accepted Answer · 2018-04-08 03:48:32Z

0

function hello(){
    console.log("hello")
}
$('#event-on-keyup').keyup(function(){
    hello()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="event-on-keyup">

answered Apr 8, 2018 at 3:48

Rinzler

1

Comments

Deepak A · Accepted Answer · 2019-03-18 09:41:48Z

0

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 


$('#my-form').clear();

answered Mar 18, 2019 at 9:41

Deepak A

1,6361 gold badge9 silver badges16 bronze badges

Comments

Harry Moreno · Accepted Answer · 2020-01-28 23:02:51Z

0

in my case I did

function myFunc() {
  console.log('myFunc', $(this));
}
$("selector").on("click", "selector", function(e) {
  e.preventDefault();
  myFunc.call(this);
});

properly calls myFunc with the correct this.

answered Jan 28, 2020 at 23:02

Harry Moreno

11.9k8 gold badges75 silver badges120 bronze badges

Collectives™ on Stack Overflow

Calling a user defined function in jQuery

11 Answers 11

4 Comments

1 Comment

Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

4 Comments

1 Comment

Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related