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'不是函数(评估'$('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 是已删除的方法之一，您可以使用

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.

但是，如果您还有其他使用这些已弃用功能的Dependend库，则可以使用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屋！