Question

我一直在使用这个脚本一段时间（最初是由Soh Tanaka编写的，但是源网站已经不见了） - 它在一个黑暗的页面上弹出一个窗口，其中有一个关闭按钮，可以解除它并使页面不受影响。它工作正常，直到我将jquery更新到最新的1.9.1以实现一些新的东西。现在它弹出窗口但单击关闭按钮不再将其删除 - 它只是将背景中的页面分流到顶部，它似乎为背景添加了另一层黑暗。

错误控制台消息： TypeError：'undefined'不是函数（评估'$（'a.close，＃fade'）。live'），它指的是脚本的最后一段：//关闭弹出窗口......“

有人能帮我解决问题吗？相当漂亮的菜鸟，更多的剪切和粘贴的人！ 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

您可以添加migration plugin来解决此问题。

在jQuery 1.9中删除了许多弃用的方法。 jQuery.live是已删除的方法之一，您可以使用jQuery.on替换live。

但是如果你有其他dependend库使用这些不推荐使用的功能，那么你可以使用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;
});

Answer 2

.live已从1.9中移除。您可以替换此语法：

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

使用：

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

jQuery更新后，弹出窗口停止工作

2 个答案: