1

我正在将来自 AJAX 调用的 HTML 响应插入到我的页面中，但是当我在创建这些元素后尝试访问它们时，它失败了。

这就是我检索和插入 HTML 的方式：

$.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   success: function(outData) {$('#my_container').html(outData);} 
})

插入<div>(id = my_container) 的结果 HTML 如下所示：

<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 插件来检测元素上的任何点击事件<li>并且它可以工作......但我无法弄清楚如何检测 div 是否填充了输出 HTML 并相应地更改其中一个<li>类例如...

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

想象一下，我需要更改第二个的 css 样式<li>.. 解决方案是什么？

4

4 回答 4

3

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

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

于 2009-01-05T23:55:04.287 回答
0

你确定你的实际请求成功了吗？如果没有选择任何内容，最可能的原因是最初实际上没有将任何内容插入 #my_container。

于 2009-01-05T23:50:03.533 回答
0

首先，尝试以下代码（代替您显示的原始 AJAX 调用）：

var html = $.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   async: false
}).responseText;
$('#my_container').html(html);

如果这样可行，那么您的li:first选择器只是在 AJAX 请求完成之前被调用。如果这不起作用，请尝试以下代码：

$.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); }
});

如果请求失败，这将导致弹出错误消息。如果弹出带有错误消息的错误消息，则请求不会返回。

于 2009-01-06T00:03:58.637 回答
0

看起来您正在尝试在创建这些元素之前访问它们，因为您当前的 ajax 调用是异步的，请尝试将选项： “async=false” 放到您的 ajax 中，它应该可以工作。

于 2015-10-06T17:23:39.913 回答