Gaining access to content inserted dynamically with ajax
<p>This is the fragment of code inserted with ajax:</p>

<pre><code>&lt;form&gt;
    &lt;label for = "task-name"&gt;Name&lt;/label&gt;
    &lt;input type = "text" id = "task-name" /&gt;

    &lt;label for = "task-description"&gt;Description&lt;/label&gt;
    &lt;input type = "text" id = "task-description" /&gt;

    &lt;input type = "hidden" id = "task-col" /&gt;
    &lt;input type = "hidden" id = "task-row" /&gt;

    &lt;input type = "submit" id = "add-task" onclick="return false" value="Add" /&gt;

&lt;/form&gt;
</code></pre>

<p>This is the JS code which insert the previous element in the DOM:</p>

<pre><code>$('html').on('click', '.task-pop', function(){
    var pos = $(this).parent().parent().attr('class').split("-");
    ajaxObj = getXmlHttpObject();
    ajaxObj.onreadystatechange = function(){
        if(ajaxObj.readyState == 4 &amp;&amp; ajaxObj.status == 200){
            $('#pop-hold').html(ajaxObj.responseText);
            $('#task-col').val(pos[0]);
            $('#task-row').val(pos[1]);
        }
    };
    ajaxObj.open("GET","resources/component/newTask.jsp");
    ajaxObj.send(null);

    $('#pop-blk').css('display','block');
    $('#pop').show("fast");
});
</code></pre>

<p>As you can see I'm trying to add some values to the hidden inputs <code>#task-row</code> and <code>#task-col</code> from the content added dynamically.</p>

<p>The page is properly displayed and no error is thrown but those two fields are never accessed. How can I solve this?</p>
