CODEWITHSUNDEEP
javascriptjquery
Mike Barwick
Mike Barwick

Reputation: 5367

How do I unbind another jQuery function on .click()?

I have this script that run to fix my menu bar to the browser on scroll. Nothing really needs to change here (works as it should). However, you may need it...

var div = $('#wizMenuWrap');
var editor = $('#main_wrapper');
var start = $(div).offset().top;

$(function fixedPackage(){   
    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '0px' : '');

        //Adds TOP margin to #main_wrapper (required)
        $(editor).css('position',((p)>start) ? 'relative' : 'static');
        $(editor).css('top',((p)>start) ? '88px' : '');
    }); 
});

Now for the issue at hand. I have another script function that calls a modal pop-up (which again works as it should). However, it's not slick from a UI perspective when I scroll the page when the modals open. So I want to disable the script above when the modal script below is called. In other words, when I click to open the modal pop-up, the script above shouldn't work.

$(function () {

var setUp = $('.setupButton');

// SHOWS SPECIFIED VIEW

$(setUp).click(function () {        
    $('#setupPanel').modal('show');
    //PREVENTS PACKAGE SELECT FIXED POSITION ON SCROLL
    $(setUp).unbind('click',fixedPackage);
});

})

As you can see above, I tried to unbind the scroll function (the first code snippet), but this is not correct.

These two scripts are in two separate js libraries.

Upvotes: 2

Views: 300

Answers (4)

Chris Baker
Chris Baker

Reputation: 50592

I strongly disagree that you ought to be binding and unbinding the event. There's no need! A little logic in your scroll event to check to see if the modal is open should take care of the issue:

$(function fixedPackage(){   
    $(window).bind("scroll", function() {

        // if the modal is displayed, do nothing
        if ($('#setupPanel').is(':visible'))
            return;

        // -- existing code here --
    }); 
});

This way, if the modal element is visible, the code simply stops where it is. Once you hide the element, the code will continue to work as before without having to manage the state of event in some other script... confusing!

Also, as mentioned in some other comments, don't use $.event.add, use the public API method bind

Documentation

Upvotes: 3

cuzzea
cuzzea

Reputation: 1535

try

  $(setUp).unbind('click').die('click')

Upvotes: 0

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

When you store a jquery object into a var you can call functions directly:

var setUp = $('.setupButton');
var div = $('#wizMenuWrap');
var editor = $('#main_wrapper');

setUp.click(...);
seTup.unbind(...);

editor.css(...);

div.css(...);

Upvotes: 1

KoU_warch
KoU_warch

Reputation: 2150

all you need to do is change your script to:

$(function () {

var setUp = $('.setupButton');

// SHOWS SPECIFIED VIEW

$(setUp).bind('click',function () {        
    $('#setupPanel').modal('show');
    //PREVENTS PACKAGE SELECT FIXED POSITION ON SCROLL
    $(setUp).unbind('click');
});

})

As explained in the jQuery Docs, Event handlers attached with .bind() can be removed with .unbind() . For more information about bind and unbind:

.bind()

.unbind()

Upvotes: 0

Related Questions