calling user defined function with params

Question

hi

I am defining function func1(); I want it to take some param(s) ie

var func1(aaa, bbb){
//do something, anything!
};

then i want to call it later in the doc something like this:

$('#some_id').click(func1($this));

but its not working.

I've been messing with it for a while but its very strange the way jquery/javascript handles user defined functions to me at least. Can some1 provide me with simple code snippet? Thx

Answer 1

It should be

function func1(aaa, bbb)  { ... }

Answer 2

Here's a quick example:

Make sure you define your function with function. Then when you want to call it from within jQuery, you should use an inline function within click().

<div>Click Me!</div>
<div>Pick this one!</div>
<script type="text/javascript">   
function func1(aaa, bbb) 
{ 
    alert('You clicked the DIV that said: "' + aaa.innerHTML + '" and ' + bbb); 
};          
$('div').click(function ()
{
    func1(this, "that's ok.");
});
</script>        

Answer 3

If all you want to pass is $(this), you don't need the parameter, as it will be available inside the defined function.

$('#some_id').click(func1);

However, you can't add parameters like this:

$('#some_id').click(func1(param1, param2));

Then, for your function definition, you just have

function func1() { }

If you do want parameters other than $(this), you will need to do the following:

$('#some_id').click(function () {
    func1(aaa, bbb); });

Answer 4

You can't do it like $('#some_id').click(func1($this)); because of .click(handler(eventObject)) definition... if you do call it like that, $this in func1($this) would be expected as an eventObject.

for this, you could use .bind() and event.data.

demo

for example..

function sum(event) {
   alert(event.data.x + event.data.y);
   // `this` here would refer to the element calling this function
   // for example, $(this).attr('id') would return `someID` if called below
}

call it as

$('#someID').bind('click',{x:4, y:5}, sum);

Answer 5

I assume you are trying to make sure that this still references the element that received the event.

Try it out: http://jsfiddle.net/jKM9s/

$('#some_id').click(function() {
    func1.call(this, 'somearg', 'somearg'); 
});

   // now "this" references the element when func1 is called
function func1(aaa, bbb){
    //do something, anything!
};

---

EDIT:

If all you wanted was reference to the element clicked, then see @phoffer's first solution.

Answer 6

In Javascript, you can't assign a function and pass arguments at the same time. Use an anonymous function...

$('#some_id').click(function() {
  var arg1 = $(this);
  var arg2 = 'whatever';

  return func1(arg1, arg2);
});

If the only parameter you need is this, assign the function reference...

$('#some_id').click(func1);