How to use a function that takes arguments with jQuery's change() method?

Question

I'm using jQuery version 1.5. I am looking at jQuery's change() function and specifically at this bit:

.change( [ eventData ], handler(eventObject) )
eventData: A map of data that will be passed to the event handler.
handler(eventObject): A function to execute each time the event is triggered.

What exactly is a "map of data" in JavaScript? How can I use the following test function as an event handler?

var myHandler = function(msg){alert(msg);};

I've tried this:

$("select#test").change(["ok"], myHandler);

and the alert reports [object Object]

Felix Kling · Accepted Answer · 2011-02-04 11:24:49Z

71

See event.data. The data is not passed as argument to handler, but as property of the event object:

$("select#test").change({msg: "ok"},  function(event) {
    alert(event.data.msg);
});

The handler always only accepts one argument, which is the event object. This is the reason why your alert shows "[object Object]", your function is printing the event object.
If you want to use functions with custom arguments, you have to wrap them into another function:

$("select#test").change({msg: "ok"},  function(event) {
    myHandler(event.data.msg);
});

or just

$("select#test").change(function(event) {
    myHandler("ok");
});

Btw. the selector is better written as $('#test'). IDs are (should be) unique. There is no need to prepend the tag name.

edited Feb 4, 2011 at 11:24

answered Feb 4, 2011 at 11:18

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

1 Comment

Scott C Wilson Over a year ago

One thing to note about this is that the $(this) that myHandler receives is different when called this way. If you need your original $(this) you could pass it as a parameter after "ok".

T.J. Crowder · Accepted Answer · 2011-02-04 11:18:34Z

What exactly is a "map of data" in Javascript?

Basically just an object, e.g.:

var data = {
    foo: "I'm foo",
    bar: "I'm bar"
};

All JavaScript objects are essentially maps (aka "dictionaries" aka "associative arrays").

How can I use the following test function as an event handler?

By wrapping it in another function:

$("select#test").change(function() {
    myHandler($(this).val());
});

That calls myHandler with the value of the select box whenever it changes.

If you want to use the eventData part, add an object prior to the handler:

$("select#test").change({
    foo: "I'm foo"
}, function(event) {
    myHandler(event.data.foo, $(this).val());
});

That calls myHandler with the "I'm foo" as the first argument, then the value of the select box, whenever it changes.

Collectives™ on Stack Overflow

How to use a function that takes arguments with jQuery's change() method?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related