jQuery 更新后弹出窗口停止工作 [英] Popup Window stopped working after jQuery update

问题描述

我已经使用这个脚本有一段时间了(最初由 Soh Tanaka 编写，但源网站已经消失) - 它会在一个变暗的页面上弹出一个窗口，并带有一个关闭按钮，可以将其关闭并取消页面显示.在我将 jquery 更新到最新的 1.9.1 以实现一些新东西之前，它运行良好.现在它会弹出窗口，但单击关闭按钮不会再将其删除 - 它只是将背景中的页面分流到顶部，并且似乎在背景中添加了另一层黑暗.

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.

错误控制台消息:TypeError: 'undefined' is not a function (evalating '$('a.close, #fade').live') 它指的是脚本的最后一段://关闭弹出窗口..."

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>

推荐答案

可以添加迁移插件 来解决这个问题.

You can add the migration plugin to solve this problem.

在 jQuery 1.9 中删除了很多不推荐使用的方法.jQuery.live 是被移除的方法之一，你可以使用 jQuery.on 作为 live 的替代品.

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.

但是，如果您有其他依赖库使用这些已弃用的功能，那么您可以使用 jQuery 迁移插件 用于向后兼容.它将几乎所有已删除的功能添加回 jQuery.

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.

在您的代码中，live() 事件注册可以更改如下

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

这篇关于jQuery 更新后弹出窗口停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！