javascript - 返回的 Jquery 对象未定义

Question

我正在尝试为我的 fancybox (1.3.4) 设置一个 onClosed 函数，但遇到了很多麻烦。 fancybox 'href': paramater 工作正常，但 'onClosed' 函数返回未定义。我对 Jquery 很陌生。我错过了什么？

$(".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') );
          } 



      });

出于调试目的，我尝试使用 alert 函数来查看 onClosed 函数的输出。我的最终目标是将当前窗口的位置更改为我的“.clickable-row”中单独定义的 url。

将警报替换为:

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

HTML

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

Answer 1

这是一个简单的变量范围问题。关闭事件处理程序中的 this 与点击处理程序中的 this 不同。在您的点击处理程序中使用局部变量来“保存”this，然后在关闭处理程序中使用该变量。

(".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') );
          } 
      });