Trying to add a public function to a jQuery object...

Trying to add a public function to a jQuery object...

Hi guys,

I'm a jQuery newbye and am currently trying to understand the basics.

I'd like to add a public function to a jQuery object representing a div with a given class. Here is the code I am using :

$(function() {
  var obj = $("<div class='foo'></div>");
 
  // Add foo function to jQuery object
  obj.addFooFunction();
 
  // Call foo function (DOESN'T WORK)
  obj.fooFunction();
});

(function($) {
  $.fn.addFooFunction = function() {
    var foo = "foo";
   
    $(this).fooFunction = function() {
      return foo;
    };
  };
})(jQuery);


When I call fooFunction on my object, Firebug gives me a "obj.fooFunction is not a function" error message.

There is probably something that I didn't understand here, but I can't put my finger on it. From my limited knowledge of jQuery, obj is a jQuery object, and I simply add a property (a function) to it. Why wouldn't it work ?

Can someone help me ?

I'm pretty sure now that this is not the right way for doing this and I would be interested to know the right way, but also (and maybe more importantly), why the way I'm implementing this doesn't work (if I want to understand jQuery, I need to know why what seems obvious to me doens't work).

Thanks by advance,

Eric.