title: Calling a function inside a jQuery plugin from outside
body: <p>I am trying to work out how to call functions within my jQuery plugin from outside the plugin. The code I have tried is not working. I'm sure I will have to restructure my plugin to allow this, but I'm not sure how to. In this example, I'm trying to access the <code>underline()</code> function.</p>
  
  <p><a href="http://jsfiddle.net/TA6u6/4/">jsFiddle</a></p>
  
  <p><strong>jQuery plugin</strong></p>
  
  <pre><code>(function($) {
      "use strict";
  
      $.fn.testPlugin = function(options) {
  
          // Settings
          var settings = $.extend({
              newText : "Yabadabado"
          }, options);
  
          return this.each(function(i, el) {            
  
              var init = function(callback) {
                  if( $(el).attr("class") === "red" ) {
                      $(el).css("color","red");
                  }
  
                  $(el).text(settings.newText);
  
                  if( callback &amp;&amp; typeof(callback) === "function" ) {
                      callback();
                  }
              };
  
              var underline = function() {
                  $(el).addClass("underline");
              };
  
              init();
          });
      };
  
  }(jQuery));
  </code></pre>
  
  <p><strong>Assign the plugin to selectors</strong></p>
  
  <pre><code>var doTest = $("#testItem").testPlugin({
      newText: "Scoobydoo"
  });
  
  var doNewTest = $("#newTestItem").testPlugin({
      newText: "kapow!"
  });    
  </code></pre>
  
  <p><strong>Call a function that is located within the plugin</strong></p>
  
  <pre><code>$("#underline").click(function(e) {
      e.preventDefault();
      doTest.underline();
  });
  </code></pre>