javascript - 访问使用 ajax 动态插入的内容

Question

这是用ajax插入的代码片段:

<form>
    <label for = "task-name">Name</label>
    <input type = "text" id = "task-name" />

    <label for = "task-description">Description</label>
    <input type = "text" id = "task-description" />

    <input type = "hidden" id = "task-col" />
    <input type = "hidden" id = "task-row" />

    <input type = "submit" id = "add-task" onclick="return false" value="Add" />

</form>

这是在 DOM 中插入前一个元素的 JS 代码:

$('html').on('click', '.task-pop', function(){
    var pos = $(this).parent().parent().attr('class').split("-");
    ajaxObj = getXmlHttpObject();
    ajaxObj.onreadystatechange = function(){
        if(ajaxObj.readyState == 4 && 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");
});

如您所见，我正在尝试从动态添加的内容中向隐藏输入 #task-row 和 #task-col 添加一些值。

页面正确显示，没有错误抛出，但是这两个字段永远不会被访问。我该如何解决这个问题？

Answer 1

改变

$('#pop-hold').html(ajaxObj.responseText);
$('#task-col').val(pos[0]);
$('#task-row').val(pos[1]);

与

var html = $(ajaxObj.responseText);
html.find('#task-col').val(pos[0]);
html.find('#task-row').val(pos[1]);
$('#pop-hold').html('').append(html);