Question

我不知道为什么我的关闭按钮不起作用。我尝试了.close，#login-box，#btn_close，.btn_close，#close，.login-box等等，谢谢。对不起，如果我问这个问题，jQuery对我来说是新的。

$(document).ready(function () {
    $(window).load(function () {
        // Getting the variable's value from a link 
        var loginBox = $(this).attr('href');

        //Fade in the Popup and add close button
        $('#login-box').fadeIn(300);

        //Set the center alignment padding + border
        var popMargTop = ($('#login-box').height() + 24) / 2;
        var popMargLeft = ($('#login-box').width() + 24) / 2;

        $('#login-box').css({
            'margin-top': -popMargTop,
            'margin-left': -popMargLeft
        });

        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);

        return false;
    });

    // When clicking on the button close or the mask layer the popup closed
    $('body').on('click', '.close', function) {
        $('#mask , .login-popup').fadeOut(300, function () {
            $('#mask').remove();
        });
        return false;
    });
});

<div id="login-box" class="login-popup">
    <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" id="close" /></a>
    <a class="forgot" href="#">Forgot your password?</a>
</div>

Answer 1

您遇到语法错误，错过了(

$('body').on('click', '.close', function) {
   // code removed for clarity
});

应该是：

$('body').on('click', '.close', function() {
                                      //^ missing brace    
});

请务必检查浏览器控制台是否有错误。您应该看到抛出语法错误

Answer 2

点击处理程序中存在语法错误

此代码......

// When clicking on the button close or the mask layer the popup closed
$('body').on('click', '.close', function) {
    $('#mask , .login-popup').fadeOut(300, function () {
        $('#mask').remove();
    });
    return false;
});

应该是

// When clicking on the button close or the mask layer the popup closed
$('body').on('click', '.close', function(e) {  // <-- pay attention here
    $('#mask , .login-popup').fadeOut(300, function () {
        $('#mask').remove();
    });
    return false;
});

提示：还可以考虑使用e.preventDefault()来禁用默认行为

$('body').on('click', '.close', function(e) {
    e.preventDefault(); // <-- right here

    $('#mask , .login-popup').fadeOut(300, function () {
        $('#mask').remove();
    });
});

jquery用.on替换.live

2 个答案: