CODEWITHSUNDEEP
jquery
Jeremythuff
Jeremythuff

Reputation: 1548

Passing data to on()

var i = 1;

$('select').on("change", i, function () {
    alert(i);
});

This is not doing anything and I am unsure why...

var i = 1;

$('select').change(function (i) {
    alert(i);
});

This is returning [object Object]

Anyway I would like to be able to pass an int to the change method and cannot see what I am doing wrong.

Upvotes: 2

Views: 107

Answers (4)

DiverseAndRemote.com
DiverseAndRemote.com

Reputation: 19888

The below code should work since i is a global variable

var i = 1;

$('select').on("change", function() {
    alert(i);
});

or if you want to pass i as data to the event then this will also work:

var i = 1;
$('select').on("change", {i: i}, function(e) {
    alert(e.data.i);
});

Upvotes: 2

sbr
sbr

Reputation: 4833

This could help:

1) when you do 

$('select').on('change',i,function(ev){...});

then the value i, will be assigned to the ev.data. so in your handler, you can do :

$('select').on('change',i,function(ev){
     alert(ev.data)
});

2) To better understand why the second one doesnt work as you expected because in JS, you may want to read about how scoping works in JS.

But the summary is , variable i that you are accessing in your alert is the local variable in the event handler scope.

function(i){ alert(i) },// here i is the event object .

simply change the variable name to x and it should work.

var i = 1;

$('select').change(function (x) {
    alert(i);
});

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816830

This is returning [object Object]

$('select').change(function (i) {
    alert(i);
});

This is not passing the variable i to your event handler, this is defining your handler with the first parameter having the name i. When the event is triggered, the handler is called and passed the current event object as first argument, i.e. i refers to that event object [docs].

You can only pass arguments to functions you when you call them, not when you define them.

This is not doing anything and I am unsure why...

$('select').on("change", i, function () {
   alert(i);
});

The second argument you pass to .on is supposed to be a string containing a selector, which allows event delegation, or an object containing data you want to make available inside the event handler. This data is not directly passed to the event handler though, it's accesible via the event object's .data property (see below).

With that said, you have two possibilites:

  1. Use your handler as a closure, like Omar shows in his answer. But be aware that whenever i changes and the event handler is executed, it will have the current value of i.

  2. If you want to "pass" a snapshot of i, i.e. the value that it has at the time you define the event handler, you can, as already said, pass a data object to .on which you can access via the event object in your handler:

    $('select').on("change", {value: i}, function(event) {
    alert(event.data.value);
});

    See event.data [docs] for more information.

I highly recommend to read the .on [docs] documentation. It contains a lot of information about how it and event handling in jQuery works. You also seem to not fully understand how functions work, in which case you should have a look at the MDN JavaScript Guide section about functions.

Upvotes: 1

gen_Eric
gen_Eric

Reputation: 227290

The parameter in the function in the event is not one you pass, it's the event object, and it's passed by jQuery when the event is ran.

You can pass a value to .on, and its value will appear in event.data.

Example:

var i = 1;

$('select').on("change", i, function (e) {
    alert(e.data);  // e.data will be the variable passed to .on
});

Or since you are declaring i outside the function, you can just use it inside.

var i = 1;

$('select').on("change", function (e) {
    alert(i);
});

Upvotes: 4

Related Questions