jQuery boilerplate call functions

Question

i use jQuery Boilerplate: http://jqueryboilerplate.com/

and now i have a problem to call a function in a function..

i can't call "openOverlay" in "clickEvents", but i can call "openOverlay" in "init".

here is a snippet:

    Plugin.prototype = {

        init: function() {
            var $me = $(this.element);

            this.clickEvents($me);
        },

        clickEvents: function($el, func) {
            $el.on('click', function() {
                var $me = $(this);
                var overlayName = $me.data('overlay');
                this.openOverlay(overlayName);
            });
        },

        openOverlay: function(overlayName) {

            var $overlayContainer = $(defaults.$overlayContainer);
            var $overlay = $overlayContainer.find('[data-overlay="' + overlayName + '"]');

            $overlayContainer.fadeIn(500);
            $overlay.delay(500).fadeIn(500);
        }
    };

Answer 1

the problem is that the on click function overrides "this"

try:

var self=this; 
$el.on('click', function() { 
    var $me = $(this); 
    var overlayName = $me.data('overlay'); 
    self.openOverlay(overlayName); 
});