Custom function call in jquery

Question

I am trying to call a custom 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 also tried to follow

 $(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> 

This does not work! Any idea where I'm wrong?

Answer 1

If you want to call a regular function through 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> 

Answer 2

Just try this one. He 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> 

Answer 3

They are called plugins, as Jaboc commented. To make sense, the plugin function must do something with the element to which it is called. Consider the following:

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

Answer 4

The following is the correct method

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

Answer 5

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

This should work

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

Answer 6

 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. 

Answer 7

 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 .

Answer 8

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

Put '; 'after defining the function ...