title: onkeypress event not firing
body: <p>I have written a code for work with both mouse and keyboard events. But the <code>onkeypress</code> event is not firing in Firefox, IE etc. I have tried with <code>keydown</code> event also, but this does not work. The HTML code for the <code>li</code> elements are: </p>
  
  <pre><code>print "&lt;li class=\"ui-menu-item \" id=\"toli$i\"  value=\"'$name','$email'\" role=\"menuitem\"&gt;&lt;a class=\"ui-corner-all\" href=\"#\"  onkeypress=\"keyhandle('$name','$email');\" onclick=\"fillto('toli$i','$name','$email');\"&gt;$ename $ediv $email&gt;&lt;/a&gt;&lt;/li&gt;";
      }
      elsif($field eq "cc"){
  
   print "&lt;li class=\"ui-menu-item \" id=\"toli\" role=\"menuitem\"&gt;&lt;a class=\"ui-corner-all\" href=\"#\" onkeypress=\"keyhandle('$name','$email');\" onclick=\"fillcc('$name','$email');\"&gt;$ename $ediv $email&gt;&lt;/a&gt;&lt;/li&gt;";
  }
  elsif($field eq "bcc"){
  
   print "&lt;li class=\"ui-menu-item \" id=\"toli\" role=\"menuitem\"&gt;&lt;a class=\"ui-corner-all\" href=\"#\" onkeypress=\"keyhandle('$name','$email');\" onclick=\"fillbcc('$name','$email');\"&gt;$ename $ediv $email&gt;&lt;/a&gt;&lt;/li&gt;";
  }
  }
  print "&lt;/ul&gt;";
  </code></pre>
  
  <p>The javascript function is </p>
  
  <pre><code>&lt;script language="javascript"&gt;
  function keyhandle(id,name,email){
  
  alert (id);
   }
  &lt;/script&gt;
  </code></pre>
  
  <p>The <code>onclick</code> event is firing, but <code>onkeypress</code> is not firing . Can anyone suggest why this is?</p>
  
  <p>The code which is given to the browser is</p>
  
  <pre><code>&lt;div id="displayto" class="display ui-widget"&gt;&lt;ul class="ui-autocomplete ui-menu ui-widget-content ui-corner-all " style="width: 550px; max-height: 200px;" aria-activedescendant="ui-active-menuitem" role="listbox"&gt;&lt;li class="ui-menu-item " id="toli1" value="'AMAL SMITHA S','amal_smitha@vssc.gov.in'" role="menuitem"&gt;&lt;a class="ui-corner-all" href="#" onkeypress="keyhandle('AMAL SMITHA S','amal_smitha@vssc.gov.in');" onclick="fillto('toli1','AMAL SMITHA S','amal_smitha@vssc.gov.in');"&gt;"AMAL SMITHA S" (COM) &amp;lt; amal_smitha@vssc.gov.in&amp;gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I have tried the code</p>
  
  <pre><code> $(document).ready(){
          $("#displayto").keypress(function(){
              alert('a');
      });
  } 
  </code></pre>
  
  <p>But it is also not working. I have given a sequential id to each <li> item.  I want to pass this sequential id through the keypress function.This id value is used for taking the next id value on "down" arrow press and previous value on up arrow press. If enter key is pressed, the fillto() function is to be called. This code is for the auto completion feature. Is there any other method to do this? Please help to solve this problem.</p>