Question

根据JQuery文档，这必须起作用，但事实并非如此。

当显示弹出窗口时调用scrollHandler（）函数，如果关闭则必须销毁它，但是unbind似乎不起作用。如果我做一个完整的$（窗口）.unbind（'scroll'）它确实有效，但它也解除了附加到scroll事件的其他元素。

代码位于：http://codepen.io/nicotinell/pen/dogJGJ整个滚动事件惨败发生在第23行和第44行之间，只是为了节省几秒钟。

演示（cookie实际上在哪里工作）位于：http://codepen.io/nicotinell/full/dogJGJ/

/* Crate Slug */
    function convertToSlug(text) {
        return text
        .toLowerCase()
        .replace(/[^\w ]+/g,'')
        .replace(/ +/g,'-');
    }

    /**/
        function handleEyeCatcher(slug){
            console.log($.cookie());
            console.log(slug);
            /* If not set, create default cookie */
            if(!$.cookie(slug)) {
                $.cookie(slug, 'true', { expires: 7 });
                $('#eye-catch').addClass('visible');
            }

            /* Status */
            var status = $.cookie(slug);
            console.log(status);

            /* Scroll Function */
            function scrollHandler () {
                var height = $(window).height();
                if ($(this).scrollTop() > height) {
                    $('#eye-catch').removeClass('invisible');
                    $('#eye-catch').addClass('visible');
                } else {
                    $('#eye-catch').removeClass('visible');
                    $('#eye-catch').addClass('invisible');
                }
            }
            /* Hide/show element depending on cookie */
            if(status == 'true'){
                console.log('it is opened');
                $(window).bind('scroll', scrollHandler);
            } else {
                $(window).unbind('scroll', scrollHandler);
                console.log('it is closed');
                $('#eye-catch').removeClass('visible');
                $('#eye-catch').addClass('invisible');
            }
        }
    $(document).ready(function(){
        /* Get raw slug */
            var rawSlug= $('#eye-catch .title').text();
        /* Convert to cookie name friendly slug */
            var slug = convertToSlug(rawSlug);

        handleEyeCatcher(slug);

        /* Hide and update cookie on click */
        $('#eye-catch .close').on('click', function(){
            $.cookie(slug, 'false', { expires: 7 });
            handleEyeCatcher(slug);
        });

        /* Revert action */
        $('#revert').on('click', function(){
            $.cookie(slug, 'true', { expires: 7 });
            handleEyeCatcher(slug);
        });
    });

Answer 1

如上所述，每次调用function scrollHandler() {...}时都会重新定义handleEyeCatcher()。

因此，保证.unbind('scroll', scrollHandler)只能看到由闭包规则确定的该函数的实例。

尝试将scrollHandler()移到handleEyeCatcher()之外，然后unbind('scroll', scrollHandler)将保证看到唯一scrollHandler。

JQuery unbind（滚动）函数不起作用

1 个答案: