JQuery passing value to function accepting event object argument

Question

I'm attempting to call a function that already works with event listeners.

For example I set my event listener:

$('#country_choice').on('change', {opt: 1}, revealOption);

and the revealOption function contains a switch statement:

function revealOption(event){
        var n = event.data.opt;
        switch(n) {
            case 1:
                // 1 reveal city
                $('#city_form').removeClass('hidden');
                //alert( "Reveal city" );
                break;
            case 2:
                // 2 reveal produce
                $('#prod_form').removeClass('hidden');
                //alert( "Reveal prod" );
                break;
            case 3:
                // 3 reveal all
                $('#city_form').removeClass('hidden');
                $('#prod_form').removeClass('hidden');
                alert( "Reveal all" );
                break;
        }    
    }

However, I'm trying to be able to use this function within other functions that aren't part of the event handler.

function dev(){
        revealOption(3);
    }

I'd prefer to avoid writing another function to do the same task, but finding it difficult to find out whether it's possible.

The closest question I've found while researching on SO is function handle jQuery event and parameter?, however this deals with passing the event object through to another function, not passing a value.

Any help would be gratefully appreciated :)

This is a good example of why adding custom data to events is almost an anti-pattern. I'd suggest refactoring your code so that you pass the arguments directly to the function, eg function revealOption(opt). Providing the function reference to an event handler is some nice syntactic sugar that JS offers, but you can quickly tie yourself in knots when you need to change the scope of that function. — Rory McCrossan
– Rory McCrossan, Commented Jul 18, 2017 at 10:10

adeneo · Accepted Answer · 2017-07-18 10:10:17Z

2

You'd have to either pass the same object

var evt = {
   data : {
      opt : 3
   }
}


function dev(){
   revealOption(evt);
}

Or change the function to check for both an event object and an integer or string or something else etc.

function revealOption(event){
    var n = typeof event === 'object' ? event.data.opt : event;

Then you could call it as

revealOption(3)

If you want to pass custom objects as well, you'd have to check for some property of the object that is unique to the event object etc.

answered Jul 18, 2017 at 10:10

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

1 Comment

GothicAnatomist Over a year ago

Thank you for all the answers, each worked well but accepted the answer I ultimately used.

Satpal · Accepted Answer · 2017-07-18 10:12:43Z

0

I would rather keep it simple and change the revealOption method to accept option.

function revealOption(n) {
    switch (n) {
        ...
    }
}

$('#country_choice').on('change', {
    opt: 1
}, function (event) {
    revealOption(event.data.opt);
});

function dev() {
    revealOption(3);
}

answered Jul 18, 2017 at 10:12

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Sudharsan S · Accepted Answer · 2017-07-18 10:29:50Z

0

Or else simply using ternary operator to check like this

 var n = (event.data && event.data.opt) ? event.data.opt : event;

answered Jul 18, 2017 at 10:29

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Collectives™ on Stack Overflow

JQuery passing value to function accepting event object argument

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related