Javascript 如何动态替换onClick事件？_Javascript_Jquery_Html_Javascript Events_Onclick

Javascript 如何动态替换onClick事件？

javascript jquery html

Javascript 如何动态替换onClick事件？,javascript,jquery,html,javascript-events,onclick,Javascript,Jquery,Html,Javascript Events,Onclick,我有以下网页： <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> 我对该代码

我有以下网页：

<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和1两次，我再次单击链接，看到0 2和1

请帮助理解发生了什么，以及如何重写

使现代化

问题的关键是用onclick操作的新参数调用旧函数

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

var globalCounter = 0;

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

你不需要

onclick="func(0)"

在html标记中，因为您已将click事件处理程序设置为

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

每次单击都会添加一个新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发送到新的处理程序。

我重写了如下函数：

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

我看到了预期的结果

您可以简单地修改您的函数，如下所示：

函数func{ 如果！窗口。计数 window.count=0； alertcount++； }

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

首先，从键中删除内联onclick。您可以在不破坏任何内容的情况下执行此操作，只需在$document内将其设置为null。就绪：

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

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

您混淆了++k和k++++k是inc，然后发送非其他方式在此通知后，我只看到0alert@JNF但没关系，试着去执行。它总是返回0。这是因为嵌入了onclick，请立即尝试。实际上我无法删除内联onclick。这个例子非常简单。你的意思是不能删除内联onclick。如果无法访问HTML，可以使用JS:this.onclick=null；在func。像Alper建议的那样附加的点击处理程序仍然可以工作。这个html是jsp的产物。我不能改变jsp逻辑应该是什么same@gstackoverflow您可以简单地使用onlick处理程序本身来执行您提到的操作，就像我想知道外部的标记如何为您工作……但它对我的chromeMay工作一样。我知道您为什么要动态替换onClick事件来执行您在描述中解释的操作。。？你的标题的答案是$key.removeAttr'onclick'；，但它并不像你在身体里描述的那样。你能不能请你回答这个问题并详细说明一下，这样问题的标题和描述就可以匹配了？更新甚至会使你自己的答案无效。在onclick操作中使用新参数调用旧函数-您的答案完全破坏旧函数…并绑定旧函数新参数！这是一种非常低效的方法。。。每次你删除现有的处理程序并添加一个新的处理程序时…是的，我只是说，这是一种非常奇怪且低效的方法来进行你在讨论中解释的计数，以防将来有人遇到这种情况。不需要计数-它可能与以前完全不同，您正在解除事件处理程序的绑定，将其删除并在事件处理程序中重新绑定。。。这真是效率低下。。如果要避免全局变量，请查看闭包。我很确定这不是做任何事情的正确方式。

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