method failing when passed as an event handler callback

Question

is there something im doing wrong here?

$('#cancelEdit').on('click', 'button', null, app.core.toggleFilterNavForSummary);

its odd that when i run it this way it works

$('#cancelEdit').on('click', 'button', function(){
    app.core.toggleFilterNavForSummary();
});

is my problem in the way im trying to pass the handler, or in the callback itself?

i can say this, the callback has a parameter which it looks for to be passed in, and if its null then it does something differernt. but if you notice above, its null in both.

heres the bulk of the callback handler

core.toggleFilterNavForSummary = function(criteria){

    var $liElem,
        text,
        criteria = criteria || null,
        parent =  $('#filterSelectedList'),
        ulBox = $('#filterCriteria'),
        editButton = $('#reviseSearch'),
        nav = $('#filterNav');

    parent.collapse('show'); //alt -  parent.hide();
    nav.collapse('hide'); //hide filter dropdown, then show criteria summary


    if(criteria){

        //empty first li in filter criteria list, and remove everything AFTER it.
        ulBox.find('li:first-child').empty().nextAll().addClass('hidden');

        //now loop selected filter criteria and append html to display
        $.each(criteria,function(index,value){

            if(index == 'a'){ 

                var $liElem = ulBox.find('.a'),
                    text = $liElem.data('text'),
                    capitalized = value.charAt(0).toUpperCase() + value.substring(1).toLowerCase();

                $liElem.empty().append(text + capitalized);

            } else if (index == 'b') {

                var $liElem = ulBox.find('.b');
                $liElem.empty().append(value).removeClass('hidden');

            } else if (index == 'c') {

                $liElem = ulBox.find('.c');
                $liElem.empty().append(value).removeClass('hidden');

            } 

        });
    }

    ulBox.removeClass('hidden');
    editButton.removeClass('hidden');

    // unhidde result-dashboard
    $('#result-dashboard').removeClass('hidden');

    // unhide results
    $('#results').removeClass('hidden');
}

the problem is, when i pass it in as null using the 1st form above, its not actually null, its coming back as this

 Object { originalEvent=Event click, type="click", timeStamp=18446744071694688000, more...}

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

The parameter won't be undefined when you pass the function as a handler. Event handlers receive one argument, the Event object. So you need the anonymous function wrapper to prevent passing that argument to your method.

If you don't want to do that, you could use one of the techniques in

How to determine if Javascript object is an event?

to determine if criteria is an event:

criteria = criteria || null;
if (typeof criteria == "object" && isEvent(criteria)) {
    criteria = null;
}

edited May 23 '17 at 10:33

Community

1
1

answered Aug 05 '14 at 19:43

Barmar

741,623
53
500
612

so thats the event handler thats being passed in, even though i have specified null? thats the event handler i have pasted in the last line of code? how can i accomplish this in one line then, pass in an empty object or something? – blamb Aug 05 '14 at 23:36
You specified that `criteria` should be set to `null` if it's not already set. But it _is_ already set, it's set to the Event object. You could test whether criteria is an Event, see http://stackoverflow.com/questions/1458894/how-to-determine-if-javascript-object-is-an-event – Barmar Aug 06 '14 at 15:24

method failing when passed as an event handler callback

1 Answers1