Home/ Questions/Q 1075937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T21:20:33+00:00

The following code renders 3 buttons with label 1, 2 and 3. Clicking on

  • 0

The following code renders 3 buttons with label “1”, “2” and “3”. Clicking on each button will alert the label.

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

However, if I replace function() {alert(i);} with foo and define function foo() { alert(i); }, I will get an error of variable i is not defined.

So how to pass parameters (other than event) to event handlers? I think defining the event handler (foo() in this case) as a named function will make the code cleaner if the event handler is long and complicated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $(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() );
}
    • 0