Conditional Disable / Re-Enable jQuery click event

Question

I've got a problem with disabling and re-enabling click events on links.

The setup is 4 columns in a row, each column containing a link and hidden content box. When you click a link, it expands the row and displays content box specific to that column. Once a link is clicked and the row expanded, all of the other links are then faded out. You would then re-click the open link to close the row and un-fade the other links.

I've setup a working fiddle of this scenario which should help explain it...

http://jsfiddle.net/r8K78/2/

$('.open-box').click(function(event) {
    event.preventDefault();

    var $list_row = $(this).parents('.row'),
        $column_box = $(this).parent('.column').find('.box');

    if ( $(this).is('.open') ) {
        $(this).removeClass('open');
        $list_row.stop().animate({ 'padding-bottom': 0 }, 100).removeClass('expanded');
        // hide the content box
        $column_box.hide();
        // find all links and fade them in
        $('.box-list').find('.box-link').fadeTo(100, 1).addClass('open-box');
    } else {
        $(this).addClass('open');
        $list_row.stop().animate({ 'padding-bottom': 200 }, 100, function() {
            // show the content box
            $column_box.fadeIn(100);
        }).addClass('expanded');
        // find all links and fade them out
        $('.box-list').find('.box-link').not(this).fadeTo(100, 0.25).removeClass('open-box');
    }
});

What I'm trying to do is disable the click event on all the faded out links, leaving the open link as the only click-able link. As you can see, the behavior of clicking a faded out link makes the whole thing go batty.

I've tried setting .off('click') on the open action (else) which does the job of disabling the click on the other links. And put .on('click') on the close action. After the close action runs, the other links are still not clickable.

Any help on figuring this out would be hugely appreciated!

you could just check for opacity: if ($(this).css('opacity') < 1) return; jsfiddle.net/r8K78/4 — A. Wolff
– A. Wolff, Commented Nov 28, 2013 at 9:55
Brilliant and so simple! Want to put it in as an answer so I can accept? — Ryan Palmer
– Ryan Palmer, Commented Nov 28, 2013 at 10:01

A. Wolff · Accepted Answer · 2013-11-28 10:03:50Z

2

You could just check for opacity:

if ($(this).css('opacity') < 1) return;

SEE

But better would be to set a class on faded out elements and check for this class instead, making code more readable/maintanable.

DEMO

answered Nov 28, 2013 at 10:03

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Palmer Over a year ago

I like that approach too. Good stuff! Really appreciate the help!

Collectives™ on Stack Overflow

Conditional Disable / Re-Enable jQuery click event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related