CODEWITHSUNDEEP
jquery
David
David

Reputation: 1963

jQuery - unbind function doesn't work

I have this code: 

$(document).ready(function() {
function resizeMe(resizingFunction) {
    var resizeId;
    resizingFunction();
    $(window).resize(function() {
      clearTimeout(resizeId);
      resizeId = setTimeout(resizingFunction, 500);
    });
}

function scrollToText() {
    var scrollHandler = function() {
        console.log('handler')
        $('html,body').animate({
            scrollTop: $("#scrollHere").offset().top-80
        }, 500);
    }

    if ($(window).width() <= 768) {
        $('.jquery').bind('click', scrollHandler);
    } else {
        console.log('above 768');
        $('.jquery').each(function() {
            $(this).unbind('click', scrollHandler);
        });
        $('.jquery').unbind('click', scrollHandler);
    }
}
resizeMe(scrollToText);
});

So, it should run every time the window browser has changed its dimensions.

When the page is freshly loaded and its width is > 768 scrollHandler is not binded and it's desirable. When I change the size of the window to <= 768 of its width then the handler is bind to a click event and it works fine. But when I resize it again and the width is > 768 then the handler is still available (it shouldn't be). I tried to change the code in the condition block to $('.jquery').unbind(); so it removes every event binded to a selector then it works fine. The problem is I have some other click events binded to this element so I just want to remove this particular one. Any clues?

Upvotes: 1

Views: 369

Answers (4)

tmpearce
tmpearce

Reputation: 12693

Every time you call scrollToText you are creating a new scrollHandler function (object) - so when you call unbind('click',scrollHandler) later in the same call that is the newly created scrollHandler, which hasn't been bound, so it can't be unbound (and you've lost the reference to the old handler).

Define scrollHandler outside of the scrollToText definition - you only need to define it once - and the rest of your code should work.

On another note, you mention that a few event handlers are bound. Consider using event namespaces, like bind('click.myScrollHandler',function(){...}) and later unbind('click.myScrollHandler').

function scrollHandler() {
        console.log('handler')
        $('html,body').animate({
            scrollTop: $("#scrollHere").offset().top-80
        }, 500);
    }

function scrollToText() {

    if ($(window).width() <= 768) {
        $('.jquery').bind('click.scrollHandler', scrollHandler);
    } else {
        console.log('above 768');
        //$('.jquery').each(function() {
        //    $(this).unbind('click', scrollHandler);
        //});
        $('.jquery').unbind('click.scrollHandler', scrollHandler);
    }
}

Upvotes: 2

Komal
Komal

Reputation: 2736

Why you using jquery? Media queries handles this things very easily.

@media (min-width:500px){/*Class name*/{/*properties*/}}
@media (max-width:499px){/*Class name*/{/*properties*/}}

Try this. Sorry for my english :/

Upvotes: 0

Anuj Kumar
Anuj Kumar

Reputation: 134

Try below code..

$(window).resize(function() {

resizeMe(scrollToText);

});

    function resizeMe(resizingFunction) {
        var resizeId;
        resizingFunction();
        $(window).resize(function() {
          clearTimeout(resizeId);
          resizeId = setTimeout(resizingFunction, 500);
        });
    }

    function scrollToText() {
        var scrollHandler = function() {
            console.log('handler')
            $('html,body').animate({
                scrollTop: $("#scrollHere").offset().top-80
            }, 500);
        }

        if ($(window).width() <= 768) {
            $('.jquery').bind('click', scrollHandler);
        } else {
            console.log('above 768');
            $('.jquery').each(function() {
                $(this).unbind('click', scrollHandler);
            });
            $('.jquery').unbind('click', scrollHandler);
        }
    }

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

Trigger the resizeMe in window resize event:

//resizeMe(scrollToText);//This will be replaced by the following code
$(window).on('resize',function(){
  resizeMe(scrollToText);
}).resize();//trigger resize on load

Upvotes: 0

Related Questions