Multiple triggering of keydown event
<p>The following code is a simplified version of a maths puzzle I'm creating. The problem is this - once the 'inc' variable has been reset to '0' (line 25) the value of the input <strong>$('#userInput').val();</strong> is no longer displayed in the #testMessage div.</p>

<pre><code>&lt;body&gt;

&lt;input type="text" id="userInput"&gt;

&lt;div id="testMessage"&gt; &lt;/div&gt;

&lt;script src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
var inc=0;

init();

function init(){
  $('#userInput').focus();

  $('#userInput').bind('keydown',function(event){
    var keyCode = event.which;
    if( keyCode == 13 ){ // RETURN KEY ...
      var user_ans = $('#userInput').val();

      $('#testMessage').html( user_ans );
      $('#userInput').val('');
      $('#userInput').focus();

      if( inc &gt; 2 ){ inc=0; }
      init();
    }
  });

  inc++;
}

&lt;/script&gt;

&lt;/body&gt;
</code></pre>

<p>If I add a count variable and an alert to the script, I notice that the keydown event is triggering multiple times:</p>

<pre><code>&lt;body&gt;

&lt;input type="text" id="userInput"&gt;

&lt;div id="testMessage"&gt; &lt;/div&gt;

&lt;script src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
var inc=0;
var count=0; // NEW VARIABLE

init();

function init(){
  $('#userInput').focus();

  $('#userInput').bind('keydown',function(event){
    var keyCode = event.which;
    if( keyCode == 13 ){ // RETURN KEY ...
      var user_ans = $('#userInput').val();

      $('#testMessage').html( user_ans );
      $('#userInput').val('');
      $('#userInput').focus();

      alert( count++ ); // NEW ALERT

      if( inc &gt; 2 ){ inc=0; }
      init();
    }
  });

  inc++;
}

&lt;/script&gt;

&lt;/body&gt;
</code></pre>

<p>Please explain what is going on.</p>
