Jquery: i have a function $.fn.my_function with other functions inside, how can i call them?

Question

Suppose i have this ($ = jquery):

 $.fn.my_function = function() {
    function foo() 
    { 
       //do something 
    };

    function bar() 
    { 
       //do something other
    };

 }

I lauch this with $('.my_class').my_function();

Now, i need to call foo and bar on callback to certain events.

How can i call them?

Answer 1

You'll have to expose them to the "outside world" somehow. Currently, they are only visible within my_function so you won't be able to call them from anywhere else.

The most naive way to fix this would be something like:

var foo;
var bar;
$.fn.my_function = function() {
    foo = function() {
       //stuff
    };
    bar = function() {
       //stuff
    };
};

The same concept could be applied to place references to them anywhere that makes sense for your usage.

Answer 2

HTML

<p id="hello">aaa</p>
<p id="hola">sss</p>
<div id='result'></div>

JS

$.fn.my_function = function() 
{
    this.foo = function(xref) {
       $("#result").append("<div>"+xref+".foo " + $(this).html() +"</div>");
    };

    this.bar = function(xref) {
       $("#result").append("<div>"+xref+".bar " + $(this).html() +"</div>");
    };

    return this;
};

var ee1 = $("#hello").my_function();
var ee2 = $("#hola").my_function();

ee1.bar("ee1");
ee2.bar("ee2");
$("#hello").html("hello hellboy");
ee1.foo("ee1");
ee2.foo("ee2");
$("#result").append("<hr />");
ee1.bar("ee1");
ee2.bar("ee2");
$("#hola").html("hola hellboy");
ee1.foo("ee1");
ee2.foo("ee2");

Answer 3

It seems that you're trying to build a jQuery plugin. You should constrain your plugin's methods to a private scope, and you should also iterate over the elements given to the plugin by the jQuery selector, and return them by using jQuery's "each" to preserve the chaining abilities:

// wrap the plugin code inside an anonymous function 
// to keep the global namespace clean   
(function($){
    $.fn.my_function = function() {
     return this.each(function(){
         function foo() {
       // stuff here
         }
      function bar() {
       // stuff here
      }
      // now you can use your foo and bar which ever way you want
      // inside the plugin
      $(this).focus(function(event){
       // do some stuff
       ...
       // call the function defined previously in the plugin code
       foo(); 
      });
      $(this).blur(function(event){
       // do some stuff
       ...
       // call the function defined previously in the plugin code
       bar();
      });
     });
    };
})(jQuery);

You might wanna have a look at these articles for more info on jQuery plugin development: http://www.learningjquery.com/2007/10/a-plugin-development-pattern

http://docs.jquery.com/Plugins/Authoring

However, if you're doing just some "utility"-type functions, you can just tie them to jQuery namespace like this:

$.foo = function(){
         // do stuff
    };
$.bar = function(){
        // do stuff
    };