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);

Answer 2

你应该使用 jQuery ajax（），你可以更容易地处理整个Ajax：

$('html').on('click', '.task-pop', function(){
    var pos = $(this).parent().parent().attr('class').split("-");

    $.ajax({
      url: 'resources/component/newTask.jsp',
      type: 'GET', // Default value is GET but I included it for you
      success: function(data) {
            $('#pop-hold').empty().append(data);
            $('#task-col').val(pos[0]);
            $('#task-row').val(pos[1]);
      }
    });

    $('#pop-blk').css('display','block');
    $('#pop').show("fast");
});

只是解决方案的一部分，希望它能帮助^^

Answer 3

隐藏输入这一事实并不妨碍您使用val()设置其值。当你像这样$('#task-col').val(pos[0]);调用val函数时，请确保：

＃task-col元素存在
pos [0]未定义（您可以使用pos[0]替换"test"进行测试）
您实际上正在执行此行（您可以通过在此之前放置altet("test")行进行测试）

当你使用jQuery时，不要乱用getXmlHttpObject，因为@Ethenyl说。请改用$.ajax。

获取对使用ajax动态插入的内容的访问权限

3 个答案: