How to replace onClick event dynamically?

Question

I have following page:

<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>

My expectations of this code execution following:

I click on link and see 0, then click one more time and see 1, then click one more time and see 2....then 3....4...5....6

But actual result:

I click on link and see 0,
I click on link and see 0 and then 1 twice,
I click on link one more time and see 0 2 2 2 2 and 1.

Please help to understand what does happen and and how to rewrite it?

Update

Key of the question is invocation of old function with new argument on onclick action!

I wonder how the <script> tag outside </html>` is working for you... — T J
– T J, Commented Oct 19, 2014 at 10:54
May I know why you want to "replace onClick event dynamically" for doing what you've explained in the description..? The answer for your title is just $("#key").removeAttr('onclick');, but it doesn't do what you've described in the body. Could you please edit the question and elaborate so that the questions title and description match..? — T J
– T J, Commented Oct 19, 2014 at 13:30
The update even invalidates your own answer. invocation of old function with new argument on onclick action" - Your answer completely destroys the old function... — T J
– T J, Commented Oct 20, 2014 at 10:33

Alper Cinar · Accepted Answer · 2014-10-19 14:11:08Z

4

you can set a global variable and increase in each function call

var globalCounter = 0;

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

you dont need

onclick="func(0)"

in html tag because you already set click event handler with

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

edited Oct 19, 2014 at 14:11

answered Oct 19, 2014 at 8:53

Alper Cinar

8615 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gstackoverflow Over a year ago

Actually I cannot delete inline onclick. This example is very simplified.

Teemu Over a year ago

What you mean with "cannot delete inline onclick". If you can't access the HTML, you can use JS: this.onclick = null; (in func). The click handler attached like Alper has suggested will still work.

gstackoverflow Over a year ago

this html is product of jsp. I cannot change jsp logic

gstackoverflow Over a year ago

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

T J Over a year ago

@gstackoverflow You can simply use the onlick handler itself for doing what you mentioned like this

T J · Accepted Answer · 2014-10-19 11:00:19Z

1

You can simply modify your function as follows:

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

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

Side notes:

You should add the <script> block inside your <html> document, preferably just before closing <body>
You are missing quotes around the id attribute

answered Oct 19, 2014 at 11:00

T J

43.2k13 gold badges87 silver badges142 bronze badges

Comments

gstackoverflow · Accepted Answer · 2014-10-19 09:28:09Z

0

I rewrote function like this:

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

and I see expected result

answered Oct 19, 2014 at 9:28

gstackoverflow

36.9k141 gold badges429 silver badges799 bronze badges

4 Comments

T J Over a year ago

This is a very inefficient way to do it... every time you're removing the existing handler and adding a new one...

T J Over a year ago

Yea i was just saying this is very strange and inefficient way to do the counting thing you explained in question, in case if anyone comes across this in future.

gstackoverflow Over a year ago

it is not necessary counting - it maybe absolutely different functions

T J Over a year ago

Whatever it is, you are unbinding an event handler, removing it and re-binding it inside an event handler... this is really inefficient.. If you want to avoid global variables, look into closures. I'm pretty sure this isn't the right way of doing whatever it is.

Teemu · Accepted Answer · 2014-10-20 05:04:21Z

0

Currently, the inline click handler is setting k to 0 and adding a new jQuery click listener on every click. Each jQuery handler will increase the value of k on every click, and this creates a mess you can see in the alerted values.

At first, remove the inline onclick from #key. You can do it without breaking anything, just set it to null within $(document).ready():

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

Then for the click counter, create a variable and a new click handler:

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

A live demo at jsFiddle.

edited Oct 20, 2014 at 5:04

answered Oct 20, 2014 at 4:58

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

Comments

JNF · Accepted Answer · 2014-10-19 09:32:34Z

-1

You are adding a new func on each click. That is why you are seeing the new number many times, as well as the old ones.

Add these lines to remove previous handlers:

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

Then send ++k to new handler.

edited Oct 19, 2014 at 9:32

answered Oct 19, 2014 at 8:58

JNF

3,7403 gold badges35 silver badges65 bronze badges

5 Comments

user2717954 Over a year ago

you're confusing the ++k and k++. ++k is inc and then send not otherwise

gstackoverflow Over a year ago

after this advise I see only 0 alert

gstackoverflow Over a year ago

@JNF but it doen't matter.

gstackoverflow Over a year ago

try to execute. it returns 0 always.

JNF Over a year ago

That's because of the onclick embedded, try now.

Collectives™ on Stack Overflow

How to replace onClick event dynamically?

Update

5 Answers 5

5 Comments

Comments

4 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

5 Answers 5

5 Comments

Comments

4 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related