How do I attach a function to an event handler with parameters

Question

I'm writing in jQuery and want to make something happen when an element is clicked. The function I want called requires parameters, and the event must be watched for at all times, so the handler is in $(document).ready(). Here's what I mean:

"use strict"
$(document).ready(function(){
    $("<button>").each(
        $(this).click(doSomething)
    );    
});
function doSomething(message){
    alert(message);
}

The problem is that doSomething needs a message that it can alert. However, were I to change the code to this:

$(document).ready(function(){
    $("<button>").each(
        $(this).click(doSomething("Hello world"))
    );    
});
function doSomething(message){
    alert(message);
}

Then "Hello world" would be alerted when the page loads, and clicking buttons would do nothing. How do I keep the behavior of the first way, but pass the method a parameter?

I guess you have erroneous usage of `.each()` and problems with jQuery selector (you basically create new ` — VisioN, Apr 26 '13 at 08:48
Possible duplicate: http://stackoverflow.com/questions/3273350/jquery-click-pass-parameters-to-user-function — Eich, Apr 26 '13 at 08:51

score 3 · Accepted Answer · answered Apr 26 '13 at 08:52

You'll need to pass an anonymous function which then calls your function with the required argument:

$(document).ready(function(){
    $("button").click(function() {
            doSomething("Hello world!");
        });
    );    
});
function doSomething(message){
    alert(message);
}

Note that I've modified the selector so that it selects existing <button> elements rather than creating a new one, and removed the unnecessary .each() since .click() implicitly iterates over the matched elements already.

score 1 · Answer 2 · answered Apr 26 '13 at 08:51

1

Try this one:

  $("button").click(function(){
        doSomething("Hello world");
    });
    function doSomething(message){
        alert(message);
    }

answered Apr 26 '13 at 08:51

Getz

3,983
6
35
52

You're right, it work but .each isn't needed, i edit the message. – Getz Apr 26 '13 at 08:54

Kenneth · Answer 3 · 2013-04-26T08:59:01.647

You need the bind-function. This is a recent addition to ECMAScript and you would need to provide it in case it's not available:

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

Check this page for a reference: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

If you include this code you can do the following:

$(document).ready(function(){
    $("button").click(doSomething.bind("Hello world"));
});
function doSomething(message){
    alert(message);
}

`.each()` will never work in that way + `$(" – VisioN Apr 26 '13 at 08:54 — VisioN, Apr 26 '13 at 08:54

score -1 · Answer 4 · answered Apr 26 '13 at 08:57

You have a number of errors in your code, first of all $("<button>") creates new dom element rather then selecting existing on page elements. Regarding this piece doSomething("Hello world") - You are immediately evaling the code, in Jquery click reference you can see that data to handler has to go as the first parameter. Here's the proper listing

$().ready(function(){
    $("button").each(
        $(this).click("Hello world",doSomething)
    );    
});
function doSomething(message){
    alert(message);
}

How do I attach a function to an event handler with parameters

4 Answers4