Question

I’m trying to bind a click event to the function below, however the entire function is currently being run when being binded in the document ready.

Is it possible to run it solely on the click event? Possibly it has something to do with the way my method is composed?

Thanks in advance

    $(function() {
        $("#expand-search").on("click", search.resize());
    });

    var search = {

        element: $('#search_advanced'),

        resize: function() {
            search.element.slideToggle(400, 'swing', search.buttonState());
        },
        buttonState: function() {
            if(search.element.is(':hidden')) {
                console.log('hidden');
            } else {
                console.log('visible');
            }
        }
    };

Answer 1

You are calling the function (handler) instead of passing the reference (name) of function (handler) to on().

Change

 $("#expand-search").on("click", search.resize());

To

 $("#expand-search").on("click", search.resize);