Popup Window stopped working after jQuery update

Question

I have been using this script for a while now ( originally written by Soh Tanaka but source website is gone) - it pops up a window over a darkened page with a close button that dismisses it and undims the page. It worked fine until I updated jquery to the latest 1.9.1 to implement some new stuff. Now it pops up the window but clicking the close button does not remove it anymore - it just shunts the page in background to top and it seems to add another layer of darkness to the background.

Error console message: TypeError: 'undefined' is not a function (evaluating '$('a.close, #fade').live') which refers to the last piece of the script: //Close Popups..."

Can anyone help me solve the problem please? Pretty noob to this and more a cut and paste person! Thanx :)

<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

You can add the migration plugin to solve this problem.

In jQuery 1.9 a lot of deprecated methods was removed. jQuery.live is one of the removed methods, you can use jQuery.on as the replacement for live.

But if you have other dependend libraries which uses these deprecated functionalities then you can use the jQuery migration plugin for backward compatibility. It adds almost all the removed functionalities back to jQuery.

In your code, the live() event registration can be changed as below

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

Answer 2

.live has been removed from 1.9. You can replace this syntax:

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

With:

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