Trouble accessing public method of javascript object

Question

I've built a jQuery plug-in and I'm struggling to understand why I can call a "public" method in one case, but not the other. I've tried to strip the plug-in down to bare bones for readability. Why can I call them method when the object is returned from an .each() loop or from within the .click() function, but not when I find the object directly and call the method? See below.

A fiddle is at http://jsfiddle.net/SSuya/

<script>

// ====================================
// My Reusable Object:
// ====================================

;(function ( $, window, document, undefined ) {

    var pluginName = "ToolTip",
        defaults = {
            foo: 'bar',
        };

    function Plugin( element, options ) {

        var widget = this;

        this.element = element;
        this.options = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.element.ToolTip = this;
        this.init();
    }

    Plugin.prototype = {
        init: function() {
                alert("I'm ready!");
        }, 

        hideTip: function() {
            alert("I'm hiding!");
        },

        showTip: function() {
            alert("I'm showing!");
        }

    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
            }
        });
    };

})( jQuery, window, document );
</script>



<html>
  <body>
    <div id='tip-test'>Target me!</div>
    <input id='bad-button' type="button" onclick="badCode()" value="This won't work...">
    <input id='good-button' type="button" onclick="goodCode()" value="But this will...?">  
  </body>
</html>

<script>
   $("#tip-test").ToolTip();  // Works fine.

     $("#bad-button").click(function(){
         $("#tip-test").ToolTip.showTip();  // This will generate an error
     });


     $("#good-button").click(function(){
         $("#tip-test").each(function(){ 
               this.ToolTip.showTip();  // Will work just fine...
          });
     });

</script>

Kevin Schmid · Accepted Answer · 2013-05-27 21:50:03Z

1

Try

$("#tip-test").get(0).ToolTip.showTip(); to access the underlying DOM element!!

answered May 27, 2013 at 21:50

Kevin Schmid

7715 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anthony Over a year ago

Gah - you're right! And I think I understand now - when I call $("#tip-test"), I'm not loading one specific object, I'm loading all objects with an id of "tip-test". Even though it will only return one, I still have to treat it like an array. Now I get it - thanks Kevin!

Kevin Schmid Over a year ago

I suggested invoking .get(0) because this will actually give you access to the underlying DOM element, not the JQuery wrapped one.

Collectives™ on Stack Overflow

Trouble accessing public method of javascript object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related