title: JavaScript/jQuery event listeners do not work after JSF component is updated via Ajax
body: <p>I'm executing the following jQuery function on <code>&lt;p:dataTable&gt;</code> filter (whose id is <code>id</code>) that allows users to enter only digits in the filter component.</p>
  
  <pre><code>$(document).ready(function() {
      $("#form\\:dataTable\\:id\\:filter").keydown(function(event) {
          //Allow: tab, escape, and enter
          if(event.keyCode===9||event.keyCode===27||event.keyCode===13||
              //Allow: Ctrl+A, Ctrl+C
              (event.keyCode===65&amp;&amp;event.ctrlKey===true)||(event.keyCode===67&amp;&amp;event.ctrlKey===true)||
              //Allow: home, end, left, right
              (event.keyCode&gt;=35&amp;&amp;event.keyCode&lt;=39)){
              //let it happen, don't do anything
              event.preventCapture();
              return;
          }//backspace, delete
          else if(event.keyCode===46||event.keyCode===8)
          {
              return;
          }
          else{//Ensure that it is a number and stop the keypress
              if (event.shiftKey||(event.keyCode&lt;48||event.keyCode&gt;57)&amp;&amp;(event.keyCode&lt; 96||event.keyCode&gt;105)){
                  //event.preventDefault();
                  event.preventCapture();
              }
          }
      });
  });
  </code></pre>
  
  <p>This function is placed under <code>context/resources/default/js/digit_only_textfield.js</code>. Therefore, it can be used on XHTML pages like,</p>
  
  <pre><code>&lt;h:outputScript library="default" name="js/digit_only_textfield.js"/&gt;
  </code></pre>
  
  <p>The XHTML page looks like the following.</p>
  
  <pre><code>&lt;h:outputScript library="default" name="js/digit_only_textfield.js"/&gt;
  
  &lt;h:form id="form" prependId="true"&gt;
  
      &lt;!--PrimeFaces extension &lt;pe:blockUI&gt;--&gt;         
  
      &lt;p:remoteCommand name="updateTable" update="dataTable"/&gt;
  
      &lt;p:panel id="panel"&gt;
          &lt;h:panelGrid id="panelGrid" columns="3" cellpadding="5"&gt;
  
              &lt;!--Some UIInput components--&gt;
  
              &lt;p:commandButton id="btnSubmit" 
                               update="panel" 
                               onstart="PF('blockUIWidget').block();" 
                               oncomplete="if(!args.validationFailed) {updateTable();}PF('blockUIWidget').unblock();" 
                               actionListener="#{bean.insert}" 
                               value="Save"/&gt;
          &lt;/h:panelGrid&gt;
      &lt;/p:panel&gt;
  
      &lt;p:dataTable id="dataTable" 
                   var="row" 
                   value="#{bean}"
                   filterEvent="keydown"
  
                   ...
                   ...  &gt;
  
                   ...
                   ...
      &lt;p:dataTable&gt;
  &lt;h:form&gt;
  </code></pre>
  
  <p>This jQuery works fine for the filter whose id is <code>is</code> but when this <code>&lt;p:dataTable&gt;</code> is updated by pressing the given <code>&lt;p:commandButton&gt;</code>, it stops functioning.</p>
  
  <p>How to make this function work after <code>&lt;p:dataTable&gt;</code> is updated by AJAX?</p>
  
  <hr>
  
  <p><strong>A new problem domain introduced:</strong></p>
  
  <p><a href="http://forum.primefaces.org/viewtopic.php?f=3&amp;t=35179" rel="nofollow noreferrer">This</a> question and corresponding replies on the PrimeFaces Community Forum still do not lead to a workaround/solution to the following problem domain.</p>
  
  <blockquote>
    <p>if a wrong key is hit (i.e a non-digit key, except backspace, delete
    etc) then, the data table is updated unnecessarily that causes some
    costly queries to be fired upon the database which is completely
    unnecessary <strong>and the data table must be prevented from being updated</strong>.</p>
  </blockquote>