Как передать параметры (кроме события) обработчикам событий? - PullRequest
Новая
       1

Как передать параметры (кроме события) обработчикам событий?

2 голосов
/ 22 сентября 2010

Следующий код отображает 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()) в качестве именованной функции сделает код чище, если обработчик событий будет длинным и сложным.

Ответы [ 3 ]

4 голосов
/ 22 сентября 2010

Если вы посмотрите на документацию для 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);
    });
});
3 голосов
/ 22 сентября 2010 
$(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() );
}
2 голосов
/ 22 сентября 2010

Третий метод, и способ, которым я обычно это делаю, - это вызов функции, которая возвращает ваш обработчик.Например: 

<!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 в основном блоке кода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...