在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倍）如果你单击div 4次（在初始加载后出现第一个日志行），这就是你在firebug控制台中看到的内容：

  

显示：1

     

显示：2

     

显示：3

     

显示：3

     

显示：4

     

显示：4

     

显示：4

     

显示：4

     

显示：5

     

显示：5

     

显示：5

     

显示：5

     

显示：5

     

显示：5

     

显示：5

     

显示：5

请帮忙！这是怎么回事？提前谢谢....

Answer 1

每次点击调用show page，为与选择器.nextPage匹配的元素添加新的onclick处理程序。

有时，在头脑或纸上执行代码以了解正在发生的事情是很好的。我已经强调了事情失控的事件。

1. 致电showPage(1)
2. print showing page 1
3. 致电preprocessPage(1)
4. 将onclick处理程序A添加到.nextPage
5. 点击.nextPage
6. 将处理程序A中的id从1增加到2
7. 致电showPage(2)
8. print showing page 2
9. 致电preprocessPage(2)。
10. 将点击处理程序B添加到.nextPage
11. 点击.nextPage
12. 将处理程序A中的id从2增加到3
13. 致电showPage(3)
14. print showing page 3
15. 致电preprocessPage(3)
16. 将onclick处理程序C添加到.nextPage
17. 将处理程序B中的id从2增加到3
18. 致电showPage(3)
19. print 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);
    });
});