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函数或从那里调用的其他代码中操作这些元素 - 此时，您将知道内容可用。

Answer 2

您确定您的实际要求是否成功？如果没有选择任何内容，最可能的原因是首先没有任何内容实际插入到#my_container中。

Answer 3

首先，尝试以下代码（代替您展示的原始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); }
});

如果请求失败，那将导致弹出错误消息。如果弹出错误消息并显示错误消息，则表示请求未返回。

Answer 4

看起来你试图在创建它们之前访问这些元素，因为你当前的ajax调用是异步的，试着把选项放到：的 “异步=假” 到你的ajax它应该是工作。

在ajax.load之后访问DOM元素

4 个答案: