CODEWITHSUNDEEP
javascriptjqueryevent-handling
Alberto De Caro
Alberto De Caro

Reputation: 5213

Passing data to a jQuery event handler

Scenario

In a GUI, a user inserts some text in a text input and then clicks a button: inserted text will be displayed in a div.

I have found a trivial solution (demo here), that is setting the output text inside the handler accessing the input element object. It sucks. Rather, I would pass the input text (not the element) to the handler.

Question

How can I pass parameters (the input message text in this case) to the handler function?

Upvotes: 7

Views: 21613

Answers (4)

Anoop
Anoop

Reputation: 23208

I modified the code in your jsFiddle. In jQuery, you can pass data as an argument and access it using event.data jQuery reference.

Upvotes: 7

Alnitak
Alnitak

Reputation: 339806

/*
 * I would not to referer UI elements here
 * Rather I would pass the $('#txtMessage').val() to the handler
 */

That is impossible.

If you want to use the current value of that input element then you have to access the UI element itself.

If your intent is to decouple the event handler from knowing which specific element is to be accessed, that's easily done by using event data to pass it to the handler, e.g.:

$(sel).on('click', {
   source: document.getElementById('txtMessage')
}, handler);

and the in the callback:

function handler(event) {
    var txt = event.data.source.value;
    ...
}

Note that the jQuery event data is supposed to be a map of key: value pairs as shown above. Passing in a jQuery object directly as shown in the accepted answer could easily break.

Upvotes: 3

Rune FS
Rune FS

Reputation: 21742

This will give you the current value of the input element. It basically still accesses the input element but there's no way to avoid that if you wish to acquire the current value

$('#myButton').on("click", {val: function (){ return $('#txtMessage').val()}}, function(event){
    $('#divOutput').html(event.data.val());
});​

Upvotes: 0

bhb
bhb

Reputation: 2561

Check this - http://api.jquery.com/event.data/

Your JS would be something like this (untested):

$('#myButton').on("click", {val: $('#txtMessage').val()}, function(event){
    $('#divOutput').html(event.data.val);
});​

Upvotes: 0

Related Questions