On/off click event on alternating tabs

Question

$('#filter').on('click', function(){
    $('#sort').off('click');
    console.log($(this));
});

$('#sort').on('click', function(){
    $('#filter').off('click');
    console.log($(this))
});

$('.close').on('click', function () {
    console.log($(this));
    $('#sort').on('click');
    $('#filter').on('click');
});

Why doesnt the div .close give back the on method to the divs above if they have the same selector id?

EDIT: For clarity, I'm wanting to temporarily remove the on event on whichever of the two elements wasn't clicked (#filter or #sort). Then clicking '.close' will return the said element back to having the on method again.

@DhavalMarthak You might as well be concise and just use `$(selector).click()` — royhowie, Feb 27 '14 at 15:06
Someone actually wrote a jQuery plugin for [this](http://stackoverflow.com/questions/1809275/suppress-jquery-event-handling-temporarily). — royhowie, Feb 27 '14 at 15:23

inf3rno · Accepted Answer · 2014-02-27T15:33:59.727

The off() does not work the way you think. It actually removes the event handlers (callback functions), not just hides them, so you cannot restore them with a simple on(), they are not stored any longer by the element after the off(), you have to add them again. It is not easy to track whether an event handler is added, so I suggest another approach.

var sort = true;
var filter = true;

$('#filter').on('click', function(){
    if (!filter)
        return;
    sort = false;
    console.log($(this));
});

$('#sort').on('click', function(){
    if (!sort)
        return;
    filter = false;
    console.log($(this))
});

$('.close').on('click', function () {
    console.log($(this));
    sort = true;
    filter = true;
});

Another approach to use toggle() and combine it with the on() and off() functions. Hmm I found that jquery toggle() is not loosely coupled to dom elements, so you cannot do this with that. You have to create your own implementation, for example something like this:

function toggle(options) {
    var currentValue = !!options.value;
    return function (value){
        if (value === undefined)
            value = !currentValue;
        if (value != currentValue)
            if (value) {
                currentValue = true;
                options.on();
            }
            else {
                currentValue = false;
                options.off();
            }
    };
}

With this toggle implementation your code will be the following:

var switches = {
    sort: toggle({
        on: function (){
            $('#sort').on('click', function(){
                switches.filter(false);
                console.log($(this))
            });
        },
        off: function (){
            $('#sort').off('click');
        }
    }),
    filter: toggle({
        on: function (){
            $('#filter').on('click', function(){
                switches.sort(false);
                console.log($(this));
            });
        },
        off: function (){
            $('#filter').off('click');
        }
    })
};

$('.close').on('click', function () {
    console.log($(this));
    switches.sort(true);
    switches.filter(true);
});

switches.sort(true);
switches.filter(true);

Great, thanks for your thorough input! The top one works well, will try the latter OO version now. — sledgeweight, Feb 27 '14 at 15:39

score 0 · Answer 2 · answered Feb 27 '14 at 15:05

You can try with:

$('#filter:not(.off)').on('click', function(){
    $('#sort').addClass('off');
    console.log($(this));
});

$('#sort:not(.off)').on('click', function(){
    $('#filter').addClass('off');
    console.log($(this))
});

$('.close').on('click', function(){
    $('#sort').removeClass('off');
    $('#filter').removeClass('off');
    console.log($(this));
});

score 0 · Answer 3 · answered Feb 27 '14 at 15:05

0

I'm assuming that in your block of code…

$('.close').on('click', function () {
    console.log($(this));
    $('#sort').on('click');
    $('#filter').on('click');
});

You want to click #sort and #filter. To do such, you'll need to do the following:

$('.close').on('click', function () {
    console.log($(this));
    $('#sort').click();
    $('#filter').click();
});

Even so, it would probably be better to wrap the other event handlers in a function and call them like such:

$('.close').on('click', function () {
    console.log($(this));
    sortClickFunction();
    filterClickFunction();
});

answered Feb 27 '14 at 15:05

royhowie

11,075
14
50
67

Maybe its my bad way of explaining this particular request..i dont want '.close' to initiate a click for the sort or filter, i want it to return the on method back to either sort or filter (depending which has been removed from the first 2 blocks) – sledgeweight Feb 27 '14 at 15:18
@lxm7 Are you saying that you want to remove the event handlers temporarily? – royhowie Feb 27 '14 at 15:20
Yeah, when one is selected (filter or sort), the other unclicked one temporarily has the on method removed until the '.close' clicked gives it back to said element thats had it removed. I'll add this to the question for clarity. Thanks – sledgeweight Feb 27 '14 at 15:29

score -1 · Answer 4 · answered Feb 27 '14 at 15:05

-1

This will do anything: $('#sort').on('click');

You need to call: $('#sort').trigger('click');

answered Feb 27 '14 at 15:05

celerno

1,367
11
30

1

He's removed the event handler. He's trying to add it back, not trigger it. – Reinstate Monica Cellio Feb 27 '14 at 15:09
1

Thank you, didn't catch that. – celerno Feb 27 '14 at 15:13

On/off click event on alternating tabs

4 Answers4