在ajax.load之后访问DOM元素
-
03-07-2019 - |
题
我将来自AJAX调用的HTML响应插入到我的页面中,但是当我尝试在创建它们之后访问这些元素时,它会失败..
这是我检索和插入HTML的方式:
$.ajax({url: 'output.aspx',
data: 'id=5',
type: 'get',
datatype: 'html',
success: function(outData) {$('#my_container').html(outData);}
})
结果HTML,插入<div>
(id = my_container
),如下所示:
<div id="my_container">
<ul>
<li id="578" class="notselected">milk</li>
<li id="579" class="notselected">ice cream</li>
<li id="580" class="selected">chewing gum</li>
</ul>
</div>
...之后,当我尝试使用以下查询访问任何<li>
元素时:
$('#my_container li:first')
或
$('#my_container ul:first-child')
或类似的,没有被选中。
我正在使用 Listen插件来检测$(document).ready
元素上的所有点击事件它工作...但我无法弄清楚如何检测div是否填充输出HTML,并相应地更改<=>的类之一...
<=>也不起作用......
想象一下,我需要改变第二个<=>的css风格..这个解决方案是什么?
解决方案
您如何检查您的AJAX通话是否已完成?因为它是异步的,所以当你在$.ajax(…)
调用之后立即执行的代码时,这些元素不可用。
尝试从success
函数或从那里调用的其他代码中操作这些元素<!>#8212;那时,您将知道内容可用。
其他提示
您确定您的实际要求是否成功?如果没有选择任何内容,最可能的原因是首先没有任何内容实际插入到#my_container中。
首先,尝试以下代码(代替您展示的原始AJAX调用):
var html = $.ajax({url: 'output.aspx',
data: 'id=5',
type: 'get',
datatype: 'html',
async: false
}).responseText;
$('#my_container').html(html);
如果可行,则在AJAX请求完成之前调用li:first
选择器。如果这不起作用,请尝试以下代码:
$.ajax({url: 'output.aspx',
data: 'id=5',
type: 'get',
datatype: 'html',
success: function(outData) { $('#my_container').html(outData); },
error: function(errorMsg) { alert('Error occured: ' + errorMsg); }
});
如果请求失败,那将导致弹出错误消息。如果弹出错误消息并显示错误消息,则表示请求未返回。
看起来你试图在创建它们之前访问这些元素,因为你当前的ajax调用是异步的,试着把选项放到: 的 QUOT <!>;异步=假QUOT <!> 强> 到你的ajax它应该是工作。