jQuery更新後彈出窗口停止工作

Question

我一直在使用這個腳本一段時間（最初由Soh Tanaka編寫，但源網站已經離開） - 它彈出一個窗口在黑暗的頁面上，並關閉了一個關閉按鈕，關閉它，取消了該頁面。它工作得很好，直到我更新jquery到最新的1.9.1來實現一些新的東西。現在它彈出窗口，但單擊關閉按鈕不會再將其刪除 - 它只是將背景中的頁面分流到頂部，並且似乎爲背景添加了另一層黑暗。

錯誤控制檯消息：類型錯誤：「未定義」不是一個函數它指的是最後一塊腳本（計算「$（」 a。關閉，#fade「）生活。」）：//關閉彈出窗口......」

誰能幫我解決這個問題嗎？漂亮的小白本，更剪切和粘貼的人！感謝名單:)

<script type="text/javascript"> 
    $("document").ready(function() { 

     $('a.poplight[href^=#]').click(function() { 
     var popID = $(this).attr('rel'); //Get Popup Name 
     var popURL = $(this).attr('href'); //Get Popup href to define size 

     //Pull Query & Variables from href URL 
     var query= popURL.split('?'); 
     var dim= query[1].split('&'); 
     var popWidth = dim[0].split('=')[1]; //Gets the first query string value 

     //Fade in the Popup and add close button 
     $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend('<a href="#" class="close"></a>'); 

     //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css 
     var popMargTop = ($('#' + popID).height() + 80)/2; 
     var popMargLeft = ($('#' + popID).width() + 80)/2; 

     //Apply Margin to Popup 
     $('#' + popID).css({ 
      'margin-top' : -popMargTop, 
      'margin-left' : -popMargLeft 
     }); 

     //Fade in Background 
     $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. 
     $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 

     return false; 
    }); 

    //Close Popups and Fade Layer 
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... 
     $('#fade , .popup_block').fadeOut(function() { 
      $('#fade, a.close').remove(); //fade them both out 
     }); 
     return false; 
    }); 


     }); 
     </script> 

Answer 1

.live已經從1.9移除，替換此語法：

$('selector').live('event', function(e) { 

有了：

$(document).on('event', 'selector', function(e) { 

Answer 2

您可以添加migration plugin來解決這個問題。

在jQuery 1.9許多不推薦的方法被刪除。 jQuery.live是被刪除的方法之一，您可以使用jQuery.on作爲live的替代方法。

但是，如果您有其他依賴庫使用這些棄用的功能，那麼您可以使用jQuery migration plugin向後兼容。它幾乎將所有刪除的功能添加回jQuery。

在你的代碼中，live()事件註冊可以爲如下

$(document).on('click', 'a.close, #fade', function() { //When clicking on the close or fade layer... 
    $('#fade , .popup_block').fadeOut(function() { 
     $('#fade, a.close').remove(); //fade them both out 
    }); 
    return false; 
});