Events triggered by dynamically generated element are not captured by event handler
<p>I have a <code>&lt;div&gt;</code> with <code>id="modal"</code> generated dynamically with the jQuery <code>load()</code> method:</p>

<pre><code>$('#modal').load('handlers/word.edit.php');
</code></pre>

<p><code>word.edit.php</code> contains a few input element, which are loaded into a modal <code>&lt;div&gt;</code>.</p>

<p>Using jQuery's <code>keyup</code> method I can capture the input values after an event fires, but
when the elements are added dynamically to the modal div, the event no llonger fires when the user enters their text.</p>

<p>Which jQuery method supports handling events triggered by dynamically created elements?</p>

<p>The code for creating the new input elements is:</p>

<pre><code>$('#add').click(function() {
    $('&lt;input id="'+i+'" type="text" name="translations' + i + '"  /&gt;')
      .appendTo('#modal');
</code></pre>

<p>The code for capturing the user's values is:</p>

<pre><code>$('input').keyup(function() {
    handler = $(this).val();
    name = $(this).attr('name');
</code></pre>

<p>This second code block seems to work for the original elements, but it is not fired by the new dynamically generated elements.</p>
