Question

我有这个html模板，我使用jQuery和AJAX从我的服务器获取html表单。当用户选择特定表单时，将从放置在此div中的服务器获取它：

idx      time   object   obj1_count   obj2_count 
0        04:10  obj1        1             0
1        04:10  obj1        2             0
2        04:11  obj1        3             0
3        04:12  obj2        3             1
4        04:12  obj2        3             2
5        04:12  obj1        4             2
6        04:13  obj2        4             3

使用我的功能：

<div id="divform" style="border:1px solid #3e8e41"></div>

我获取并放入“divform”的每个表单都有2个隐藏字段，其中包含id'xnt'和'ypnt'。我想在每种情况下使用我的函数填充它们（在这种情况下，我只是将值1和2作为测试值）。我可以获取表单，但问题是，当我尝试使用<script type="text/javascript"> //... setting the correct URL for GETing a specific form ... //... the function: $(document).ready(function(){ $("input[name=formfetch]").click(function(){ //The click event that triggers the asynchronous GET $("#divform").html("..."); var formurl = detailurl.replace("rootslug", $(this).attr('slug')); //The URL for the GET $("#divform").load(formurl); //GET + load at divform var frm = $('#theform'); document.getElementById('xpnt').value = 1; //Trying to fill the hidden fields, this fails! document.getElementById('ypnt').value = 2; }); });访问这些隐藏字段然后修改其值时，浏览器（在本例中为Chrome）控制台显示：

（index）：113 Uncaught TypeError：无法设置null的属性“value” 在HTMLInputElement。

根据我搜索和测试的内容，我知道页面的来源不会被更改，并且表单实际上不会出现在页面源中（在页面源中）。这里的问题是我在'divform'中放置的表单没有被添加到页面的HTML DOM中，因此被document.getElementById这些方法变得“无法访问”？我该如何解决这个问题？

PS :(我从服务器获取表单没有问题）

Answer 1

我认为问题在于您在执行.load后正在尝试按ID搜索元素，而实际上应该等到加载完成

$("#divform").load(formurl, function(resonse, status){
       // you may check status here to check for successfull load
       $("#divform").find("#xpnt").attr('value', 1).end()
                    .find("#ypnt").attr('value', 2);
 });

Javascript / jQuery将表单添加到页面，但不能访问DOM

1 个答案: