Question

Im trying to make simple Jquery plugin. I went through the Jquery documention and I reduced the layout to make a simple alert. This is my Jquery Plugin code.

        (function($){
      $.fn.foo = function(){
        alert("HI");
      };


})(jQuery);

Than on my main page I have the Jquery reference URL and this code

  <script type="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
  foo();
    });
</script>

I keep getting errors in the debugger
SCRIPT5009: ‘foo’ is undefined

Please help me fix this.

Answer 1

you can invoke the foo method on some element or need to define it differently e.g.

<div id="test" />

Plugin –

(function($){
      $.fn.foo = function(){
        alert("HI");
      };

       $.otherfoo = function(){
            alert('Hiiiii');
        };
})(jQuery);

Test –

$(document).ready(function(){
  $('#test').foo();
  $.otherfoo();  
});

should work fine.