ITKeyword,专注技术干货聚合推荐

注册 | 登录

解决javascript - Access DOM elements after ajax.load

itPublisher 分享于

2020腾讯云双十一活动,全年最低!!!(领取3500元代金券),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1073

【阿里云】双十一活动,全年抄底价,限时3天!(老用户也有),
入口地址https://www.aliyun.com/1111/home

推荐:Beginning Javascript With Dom Scripting And Ajax From Novice To Professional

Beginning Javascript With Dom Scripting And Ajax From Novice To Professional :

I am inserting the HTML response from an AJAX call into my page, but then when I try to access those elements after they have been created, it fails..

This is how i retrieve and insert the HTML:

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

The outcome HTML, which is inserted into the <div> (id = my_container) looks like:

<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>

...and afterwards, when I try to access any of the <li> elements using queries like: $('#my_container li:first') or $('#my_container ul:first-child') or similar, nothing gets selected.

I am using the Listen plugin to detect any click events on the <li>elements and it works... But i couldn't figure out how to detect if the div is populated with the output HTML and accordingly change one of the <li>'s class for example...

$(document).ready does not work either...

Imagine I need to change the css style of the second <li>.. what is the solution to this?

javascript jquery dom client-scripting
|
  this question
edited Jan 5 '09 at 23:54 Shog9 ♦ 112k 30 188 221 asked Jan 5 '09 at 23:43 Kemal Emin 6,269 16 61 86

 | 

4 Answers
4

解决方法

How are you checking to see whether your AJAX call has completed? Because it's asynchronous, the elements will not, of course, be available to the code which executes immediately after your $.ajax(…) call.

Try manipulating those elements from within the success function or in other code which is called from there — at that point, you will know that the content is available.


|
  this answer
answered Jan 5 '09 at 23:55 Ben Blank 30.4k 14 96 142      thanks for answering Ben.. just like you said, the problem was resolved (even though I don't know its inner workings yet) when i typed: async:false –  Kemal Emin Jan 6 '09 at 5:54      Just be careful with synchronous "background" calls — it can cause significant pauses in your page's loading and operations and can even hang browsers (though jQuery may have a workaround for the latter). –  Ben Blank Jan 6 '09 at 16:46

 | 

Are you sure your actual request is successful? If nothing is selected, the most probably reason is that nothing was actually inserted into #my_container in the first place.


|
  this answer
answered Jan 5 '09 at 23:50 Salty 5,321 3 24 28

 | 

First, try the following code (in place of the original AJAX call you showed):

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

If that works, your li:first selector is just being called before the AJAX request finishes. If that doesn't work, try the following code:

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

That will cause an error message to pop up if the request fails. If an error message pops up with an error message, the request is not returning.


|
  this answer
edited Jan 6 '09 at 0:34 answered Jan 6 '09 at 0:03 William Brendel 22.1k 10 61 76      thanks William, you actually made me realise I did not typed async: false which solved the problem. thanks... –  Kemal Emin Jan 6 '09 at 5:55

 | 

it's looks like you are trying to access to those elements before their was created because your current ajax call is asynchronous, try to put the option: "async=false" to your ajax and it should be work.


|
  this answer
answered Oct 6 '15 at 17:23 Alexander Sánchez 1 1

 | 


相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。