How to solve this simple jQuery issue?
<p>I'm new to jQuery and JavaScript in general. I noticed that if you insert an element via jQuery into the DOM and try to perform an action on that element later, it fails. For example:</p>

<p>I am adding a class of "listenToField" to all the input elements on the page:</p>

<pre><code>$(function() {

$('input').addClass('listenToField');

});
</code></pre>

<p>Then when I add the second function:</p>

<pre><code>$(function() {

     $('input').addClass('listenToField');

     // second function
     $('.listenToField').keydown(function() {

          alert('Hi There')

     });

});
</code></pre>

<p>It does not alert 'Hi There'.</p>

<p>However if I hardcode the class "listenToField" into the HTML inputs, the alert works. How can I still have it work when jQuery inserts the class dynamically without resorting to hard coding?</p>
