javascript - ajax.load 之后访问 DOM 元素

Question

我正在将 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 plugin检测 <li> 上的任何点击事件元素并且它有效...但我不知道如何检测 div 是否填充了输出 HTML 并相应地更改 <li> 之一的类例如...

$(document).ready也不起作用...

假设我需要更改第二个 <li> 的 css 样式..这个问题的解决方案是什么？

Answer 1

您如何检查 AJAX 调用是否已完成？因为它是异步的，所以这些元素当然不能用于在 $.ajax(…) 调用之后立即执行的代码。

尝试从 success 函数或从那里调用的其他代码中操作这些元素 - 此时，您将知道内容可用。