Jquery object returned is undefined

Question

I am attempting to set up an onClosed function for my fancybox (1.3.4) but running into much trouble. The fancybox 'href': paramater is working correctly but the 'onClosed' function returns undefined. I am very new to Jquery. What am I Missing?

$(".clickable-row").click(function() {
        $.fancybox({
          'href': $(this).attr('data-href'),
          'padding' : '20px',
          'width' : 950,
          'overlayOpacity'   :  '0.4',
          'overlayColor'         :  '#000',
          'hideOnContentClick' :   false,
          'autoScale'        :   true,
          'transitionIn'         :   'fade',
          'transitionOut'    :   'fade',
          'speedIn' : '300',
          'speedOut' : '300',
          'type'             :   'iframe',
          'onClosed' : function() {
              alert ( $(this).attr('data-href') );
          } 



      });

For debugging purposes I have tried to use the alert function to view the output of the onClosed function. My end goal is to change the location of the current window to a separately defined url within my ".clickable-row".

replace alert with:

window.location.replace( $(this).attr('data-href2') );

HTML

<tr class='clickable-row' data-href='link1.asp' data-href2='link2.asp'>

Answer 1

That's a simple variable scope issue. The this inside your close event handler is not the same this that's in your click handler. Use a local variable in your click handler to "save" this and then use this variable inside the close handler.

(".clickable-row").click(function() {
        var self = $(this);
        $.fancybox({
          'href': $(this).attr('data-href'),
          'padding' : '20px',
          'width' : 950,
          'overlayOpacity'   :  '0.4',
          'overlayColor'         :  '#000',
          'hideOnContentClick' :   false,
          'autoScale'        :   true,
          'transitionIn'         :   'fade',
          'transitionOut'    :   'fade',
          'speedIn' : '300',
          'speedOut' : '300',
          'type'             :   'iframe',
          'onClosed' : function() {
              alert (self.attr('data-href') );
          } 
      });