title: How to replace onClick event dynamically?
body: <p>I have following page:</p>
  <pre><code>&lt;body&gt;
  
  &lt;a href=&quot;#&quot; id=key onclick=&quot;func(0)&quot;&gt;foo&lt;/a&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  function func(k){
      alert(k);
      $('#key').click(function() {func(++k)});
  }   
  &lt;/script&gt;
  </code></pre>
  <p>My expectations of this code execution following:</p>
  <p>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</p>
  <p>But actual result:</p>
  <p>I click on link and see 0,<br />
  I click on link and see 0 and then 1 twice,<br />
  I click on link one more time and see 0 2 2 2 2 and 1.</p>
  <p>Please help to understand what does happen and and how to rewrite it?</p>
  <h2>Update</h2>
  <p>Key of the question is invocation of old function with new argument on <code>onclick </code>action!</p>