Question

以下代码呈现3个标签为“1”，“2”和“3”的按钮。点击每个按钮将提醒标签。

<!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>

但是，如果我将function() {alert(i);}替换为foo并定义function foo() { alert(i); }，我将收到错误variable i is not defined。

那么如何将参数（事件除外）传递给事件处理程序？我认为将事件处理程序（在本例中为foo()）定义为命名函数将使代码更清晰，如果事件处理程序冗长而复杂。

Answer 1

如果查看the documentation for bind，您会看到它有一个可选的eventData参数。例如，这可行：

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);
    });
});

Answer 2

$(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() );
}

Answer 3

第三种方法，我通常这样做的方法是调用一个返回你的处理程序的函数。像这样：

<!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">
            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>

我在绑定函数中使用x只是为了区别于主代码块中的i。

如何将参数（事件除外）传递给事件处理程序？

3 个答案: