ansaurus

Question

How to pass parameters (other than event) to event handlers?

Answer 1

+2 A:

$(function() {
                var a = [1, 2, 3];
                $.each(a, function(i, ai) {
                    $('<button />').text(i).appendTo('body')
                        .click(function() { foo.apply(this,[i]);});
                });
            });


function foo( i )
{
   alert( i + " : " + $(this).text() );
}

Ghommey 2010-09-22 06:44:07

Shouldn't it be `foo.call`? `apply` takes an array.

Matthew Flaschen 2010-09-22 06:47:33

@Matthew Flaschen: thx - I fixed that.

Ghommey 2010-09-22 06:49:47

@Ghommey, why create an array? `foo.call(this, i);` would be a bit simpler.

Matthew Flaschen 2010-09-22 07:12:05

I like this answer. The most succinct one IMO. I guess Ghommey use `apply()` instead of `call()` because `apply()` can be used for passing multiple parameters which is a more general case.

powerboy 2010-09-22 07:23:40

@powerboy - Both can be used to pass multiple arguments. `apply()` requires the data to be packed in an array, while `call()` can take any number of arguments after the scope parameter. So these two statements are equivalent: `myfunction.apply(this,[1,2,3,'four'])` and `myfunction.call(this,1,2,3,'four')`. In practice, I've found it easier and more natural to use `call()`.

Andrew 2010-09-22 09:02:41

Answer 2

+2 A:

A third method, and the way I usually do it is to invoke a function that returns your handler. Like this:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
        <script type="text/javascript">
            var bindFoo = function(x) {
                return function() {alert(x);};
            };
            $(function() {
                var a = [1, 2, 3];
                $.each(a, function(i, ai) {
                    $('<button />').text(i).appendTo('body')
                        .click(bindFoo(i));
                });
            });
        </script>
    </head>
    <body>
    </body>
</html>

I'm using x in the binding function only to distinguish it from i in the main code block.

Andrew 2010-09-22 06:47:11

Answer 3

+3 A:

If you look at the documentation for bind, you'll see it has an optional eventData parameter. So for example this would work:

function foo(e)
{
    alert(e.data.theI);
}

$(function ()
{
    var a = [1, 2, 3];
    $.each(a, function (i, ai)
    {
        $('<button/>').text(i).appendTo('body').bind("click", {theI: i}, foo);
    });
});

Domenic 2010-09-22 06:50:06

ansaurus

tags:

views:

answers:

How to pass parameters (other than event) to event handlers?

related questions