Question

I’m trying to attach a function directly to a change event in jQuery, but I can’t quite figure it out. I need to pass the element that has changed as a paramater to the function I’m invoking.

Something like this, ( but it doesn’t work ):

var fun = function( trigger ){
  // do something
};

$( 'select' ).change( fun( $(this) ) );

The following works:

$( 'select' ).change( function(){
  fun( $(this) );
});

I’ve also tried (just for the hell of it)

$( 'select' ).bind( 'change', fun( $(this) ) );

But it doesn’t work either.

Answer 1

$('select').change(fun);

Will do the trick. You will be able to access this inside the fun function.

Here is an example:

var fun = function(){
    console.log(this);//output will be the DOM element that had the `change` event fire
};

$( 'select' ).change( fun );

Your second solution works because the anonymous function you are passing as the event handler is given access to the this variable and you are then passing it to the fun function. Any function passed to a jQuery event handler will recieve the this variable that stores a reference to the DOM element that had the event fire on it.