jQuery。单击会发生什么，然后页面会调整大小

Question

当页面宽度低于 1100 像素时，我需要禁用点击。但是如果用户决定让它变大，那么我需要重新启用它。我有这段代码，但如果您将页面大小调整到超过 1100 像素，它就不起作用；

$(window).on('resize', function () {  
    if ($(window).width() < 1100)
    {
        $('.portfolio-box-caption, .portfolio-box, .popup-gallery, .container-fluid').click(function(){
            return false;
        });
    }
    else if ($(window).width() > 1100)
    {
        $('.portfolio-box-caption, .portfolio-box, .popup-gallery, .container-fluid').click(function(){
            return true;
        });
    }
}).resize();

Answer 1

您需要先绑定点击事件，然后再解绑。检查加载页面的大小将决定您从哪里开始。

http://api.jquery.com/bind/

$( "#foo" ).bind( "click", function() {
    alert( "User clicked on 'foo.'" );
});

将附加到选择器的函数想象成一个列表，它们都会根据触发的事件来执行。使用您的代码，您将在每次调整大小时附加到 'lists'，并且永远不会清除它们。

Answer 2

使用 off() 和 on() 的组合以及全局变量布尔值：

var clickAdded = ($(window).width() >= 1100) ? true : false,
    w = window;
$(window).on('resize', function () {  

    if ($(w).width() < 1100)
    {
        $('.portfolio-box-caption, .portfolio-box, .popup-gallery, .container-fluid').off('click');
        w.clickAdded = false;
    }
    else 
    {
        if (!w.clickAdded) {
            $('.portfolio-box-caption, .portfolio-box, .popup-gallery, .container-fluid').on('click', function(){
                w.clickAdded = true;
                //your JS
            });
        }
    }
});

为防止添加多个点击处理程序，您需要检查它是否已添加（因为如果 window 继续放大超过 1100 像素，调整大小事件仍会触发）

jQuery。单击会发生什么，然后页面会调整大小

jQuery. What happens to click, then page resizes

jquery

resize

window