Question

我有以下页面：

<body>

<a href="#" id=key onclick="func(0)">foo</a>

</body>
</html>
<script type="text/javascript">
function func(k){
    alert(k);
    $('#key').click(function() {func(++k)});
}   
</script>

我对此代码执行的期望如下：

我点击链接并看到0，然后再点击一次并看到1，然后再点击一次，看到2 ....然后3 .... 4 ... 5 .... 6

但实际结果：

点击链接，看0，我点击链接，然后看到0然后再看两次，我再次点击链接，看到0 2 2 2 2和1。

请帮助了解发生了什么以及如何重写它？

更新

问题的关键是在onclick动作上使用新参数调用旧函数！

Answer 1

您可以设置全局变量并增加每个函数调用

var globalCounter = 0;

$('#key').click(function() {
    alert(globalCounter);
    globalCounter++;
});

你不需要

onclick="func(0)"

在html标记中，因为您已经使用

设置了click事件处理程序

$('#key').click(function(){});

Answer 2

我重写了这样的功能：

function func(k){
    alert(k);
    $("#key").removeAttr('onclick');
    $("#key").unbind('click')   
    $('#key').click(function() {func(++k)});
}

我看到了预期的结果

Answer 3

您可以按如下方式修改您的功能：

＆＃13;

function func() {
  if (!window.count)
    window.count = 0;
  alert(count++);
}

＆＃13;

<a href="#" id="key" onclick="func()">foo</a>

＆＃13;

附注：

您应该在<script>文档中添加<html>块，最好在关闭<body>之前
id属性

Answer 4

目前，内联点击处理程序将k设置为0，并在每次点击时添加新的jQuery点击侦听器。每个jQuery处理程序都会在每次单击时增加k的值，这会在警报值中看到一个混乱。

首先，从onclick中移除内联#key。您可以在不破坏任何内容的情况下执行此操作，只需将其设置为null内的$(document).ready()：

$('#key').prop('onclick', null);

然后对于点击计数器，创建一个变量和一个新的点击处理程序：

var clickCounter = 0;
$('#key').click(function () {
    clickCounter += 1;
});

A live demo at jsFiddle

Answer 5

您每次点击都会添加新的func。这就是为什么你多次看到新号码以及旧号码的原因。

添加以下行以删除以前的处理程序：

$("a").prop("onclick", null); //remove default "onclick" handler - otherwise the 0 will always continue coming
$("#key").off("click"); //remove old jQuery assigned handlers

然后将++k发送给新的处理程序。

如何动态替换onClick事件？

更新

5 个答案: