Увеличение переменной в jquery click ()

Question

С помощью этого кода я пытаюсь динамически привязать событие click к элементу и ссылаться на инкрементную переменную:

<script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>
<script language="javascript">
$(document).ready(function() {
function preprocessPage(id){    
        $('.nextPage').click(function(){
            showPage(++id);
        });
    }

function showPage(id){
    console.log('showing: '+id);
        preprocessPage(id);
    }   


showPage(1);//init
});

<div class="nextPage">show next page</div>

Когда страница загружается, онаКажется, работает как ожидалось.И первый щелчок, кажется, работает.Тогда все становится чокнутым.Кажется, он проходит через код несколько раз (увеличиваясь в 2 раза). Вот что вы увидите в консоли firebug, если щелкнуть div 4 раза (первая строка журнала появляется после загрузки init):

показ: 1

показ: 2

показ: 3

показ: 3

показ: 4

Показ: 4

Показ: 4

Показ: 4

Показ: 5

Показ: 5

Показ: 5

показ: 5

показ: 5

показ: 5

показ: 5

показ: 5

Пожалуйста, помогите!В чем дело?Заранее спасибо ....

Answer 1

Страница показа каждого клика вызывает, который добавляет новый обработчик onclick к элементам, соответствующим селектору .nextPage.

Иногда полезно выполнить код в своей голове или на бумаге, чтобы понять, что происходит.Я подчеркнул события, когда все выходит из-под контроля.

1. вызов showPage(1)
2. печать showing page 1
3. вызов preprocessPage(1)
4. добавить обработчик onclick A в .nextPage
5. нажмите .nextPage
6. Увеличьте id в обработчике A с 1 до 2
7. Вызовите showPage(2)
8. print showing page 2
9. Call preprocessPage(2).
10. добавить обработчик onclick B к .nextPage
11. click .nextPage
12. Увеличить id в обработчике Aот 2 до 3
13. вызов showPage(3)
14. печать showing page 3
15. вызов preprocessPage(3)
16. добавить обработчик onclick C в .nextPage
17. Увеличение id в обработчике B с 2 до 3
18. вызов showPage(3)
19. печать showing page 3
20. вызов preprocessPage(3)
21. добавить обработчик onclick D в .nextPage
22. ...

Следующее должно быть ближе к тому, что вы ищетедля

$(document).ready(function() {

    function showPage(id){
      console.log('showing: ' + id);
    }   

    // Start with page 1
    var id = 1;
    // Show the first page
    showPage(id);
    // Add onclick handler to each element with class="nextPage"
    $('.nextPage').click(function(){
         // Increment the page id and then call showPage with the current id
         showPage(++id);
    });
});