Call the same jQuery function both on load and on click

Question

In my "update" pages I have often the need to call the same jQuery function both on page load and on click of some checkbox, mostly like this:

function foo(){
    if ($('#mycheckbox').is(':checked')){
        $('.myclass').hide();
    } else {
        $('.myclass').show();
    }
}

$(function() {

    foo(); // this is launched on load
    $('#mycheckbox').click(function(){
        foo(); // this is launched on checkbox click
    })  

});

On page load, the checkbox could be checked or not depending on database values: that's why I have the need to launch the foo(); on load

Well, this works fine, but I always wondered if... there is a better or most elegant solution? Thanks in advance

Answer 1

you could avoid the second function call and bind the function foo directly to the click handler:

function foo(){
    if ($('#mycheckbox').is(':checked')){
        $('.myclass').hide();
    } else {
        $('.myclass').show();
    }
}

$(function() {
    foo(); // this is launched on load
    $('#mycheckbox').click(foo)  

});

Answer 2

You could use the trigger() function to trigger the event immediately;

$('#mycheckbox').click(function (){
    if ($('#mycheckbox').is(':checked')){
        $('.myclass').hide();
    } else {
        $('.myclass').show();
    }
}).trigger('click'); 

However, bear in mind that this will also trigger any other click handlers you have defined on the element.

Alternately, you could write a tiny jQuery plugin to do it for you;

jQuery.fn.nowAndOn = function (event, handler) {
    handler();

    this.bind(event, handler);

    return this; // support chaining
};

And you'd use it like;

$(function() {
    $('#mycheckbox').nowAndOn('click', function (){
        if ($('#mycheckbox').is(':checked')){
            $('.myclass').hide();
        } else {
            $('.myclass').show();
        }
    });
});

However, the problem with this is that inside the click handler, this is normally the current element; whereas by calling handler(); like we do here, this would point to window instead (this isn't relevant in the exact snippet you posted, as you don't use this).

To fix this, we could add some complexity and use the Function.call method to set the value of this;

jQuery.fn.nowAndOn = function (event, handler) {
    this.each(function () {
        handler.call(this);
    });

    this.bind(event, handler);

    return this;
};

However, you'll still have a problem if you rely on an Event object being passed...

Answer 3

One way to do it (assuming that your site contains a server side code component) would be to hide/show the item in the server side render, as appropriate. This means that there is no screen 'flicker' (however slight it is) on load of the page.