Jquery event does not work on dynamically created html
<pre><code>&lt;li&gt;
        &lt;label&gt;Chapter Title&lt;/label&gt;
        &lt;input type="text" name="chapter[1][title]" /&gt;
    &lt;/li&gt;

    &lt;li&gt;    
        &lt;label&gt;Text&lt;/label&gt;
        &lt;textarea name="chapter[1][text]" &gt;&lt;/textarea&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;input type="file" name="image2" id="image2" /&gt;
        &lt;img id="thumb2" width="100px" height="100px"/&gt;
        &lt;input type="hidden" id="image_src2" name="chapter[1][photo]" /&gt;
    &lt;/li&gt;

    &lt;li id="caption2" style="display:none;"&gt;
        &lt;label&gt;Photo Caption&lt;/label&gt;
        &lt;input type="text" name="chapter[1][photo_caption]" /&gt;
    &lt;/li&gt;    
</code></pre>

<p>The form fields and javascript code is created dynamically.</p>

<pre><code>var thumb = $('img#thumb2'); 
    new AjaxUpload('image2', {
        action: "action",
        name: 'userfile',
        onSubmit: function(file, extension) {
            $('div.preview').addClass('loading');
        },
        onComplete: function(file, response) {
            thumb.load(function(){
                $('div.preview').removeClass('loading');
                thumb.unbind();
            });
            thumb.attr('src', response);
            $('#image_src2').val(response);
            $('#image_src2').live('change',function()
            {
                $('#caption2').show(); // this does not work
            });
        }
    });     
</code></pre>

<p>the image is uploading well and the thumbnail is shown but the caption field does not show up and no error is shown.</p>
