Исходные данные: на странице есть 9 кнопок с id вида "btn1", "btn2", "btn3", …. "btn9". При клике на кнопку нужно выводить сообщение "Вы нажали кнопку N", где N – это текст кнопки. 

    <div class="btn" id="btn1">1</div>
    <div class="btn" id="btn2">2</div>
    <div class="btn" id="btn3">3</div>
    <div class="btn" id="btn4">4</div>
    <div class="btn" id="btn5">5</div>
    <div class="btn" id="btn6">6</div>
    <div class="btn" id="btn7">7</div>
    <div class="btn" id="btn8">8</div>
    <div class="btn" id="btn9">9</div>

Решение:

Решить задачу с помощью jQuery довольно просто с помощью такого кода:

        $(document).ready(function () {
            for (i = 1; i < 10; i++) {
                $("#btn" + i).click(btnHandler( i));
            }

            function btnHandler(i) {
                return function () {
                    alert('Вы нажали кнопку ' + $("#btn" + i).text())
                }
            };
        });

Функция-обработчик "btnHandler" должна быть вынесена за цикл! В противном случае вы потратите не мало времени, чтоб понять, почему работает не так как надо.

 

Распространенная ошибка:

Используя код, который как бы очевиден, получаем при клике на любую кнопку только надпись "Вы нажали на кнопку ", ибо кнопки с id "btn10" на странице нету. В данном случае "i" принимает максимальное значение.

        $(document).ready(function () {
            for (i = 1; i < 10; i++) {
                $("#btn" + i).click(function () {
                    alert('Вы нажали кнопку ' + $("#btn" + i).text());
                });
            }
        });

Вопреки здравому смыслу, значение "i" в данном случае равно 10 при нажатии любой кнопки. Можно добавить строчку alert(i), чтоб убедиться в этом.

        $(document).ready(function () {
            for (i = 1; i < 10; i++) {
                $("#btn" + i).click(function () {
                    //alert($("#btn" + i).text());
                    alert(i);
                });
            }
        });