Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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]

like image 286
Manos Dilaverakis Avatar asked Feb 04 '11 11:02

Manos Dilaverakis


People also ask

How do you use change function?

The change event occurs when the value of an element has been changed (only works on <input>, <textarea> and <select> elements). The change() method triggers the change event, or attaches a function to run when a change event occurs. Note: For select menus, the change event occurs when an option is selected.

How do you trigger an event when a textbox is filled with value?

change function , but that needs to be done only if the the value is changed using the button . $("#address"). change will trigger if you perform any change in text field. If you want to trigger alert only when button click why you don't use alert inside button click function.

How do you change this in Javascript?

call() ) but you cannot re-assign the keyword, this . Show activity on this post. You can't change what this refers to from inside the function. However, you can call a function in a specific context - so that this refers to a specific object - by using call or apply .

What is the use of this keyword in jQuery?

The this Keyword is a reference to DOM elements of invocation. We can call all DOM methods on it. $() is a jQuery constructor and in $(this), we are just passing this as a parameter so that we can use the jQuery function and methods.


2 Answers

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.

like image 176
Felix Kling Avatar answered Sep 18 '22 15:09

Felix Kling


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.

like image 33
T.J. Crowder Avatar answered Sep 22 '22 15:09

T.J. Crowder