Page 1 of 1

jQuery selectors with ajax

Posted: Mon Mar 24, 2008 3:35 pm
by GeXus
I have some data that's being loaded in via jQuery's .load function... I want to add a hover attribute to items within that loaded div, but it doesn't appear to work because the actual elements aren't in the source, since their being loaded via ajax.

For example, here's what I have..

Code: Select all

 
$(document).ready(function(){
$('#divTest li').hover(function() {
  alert('test');
})
});
 

Code: Select all

 
<div id="Data"></div>
 
This is the div that's being loaded from another page with the following content...
 
<div id="divTest">
<ul>
<li>some data</li>
</ul>
</div>
 
Any ideas how to get this to work? Thanks!

Re: jQuery selectors with ajax

Posted: Tue Mar 25, 2008 11:02 am
by pickle
What I've done in cases like that is have a specific function that re-parses the DOM. I then call that function after load() is called. The result is that after load is done, the DOM is updated, then events are attached to the newly created elements.

Also, if you wrap your code not just in [syntax=php][/syntax] tags, but in [syntax=javascript][/syntax] and [syntax=html][/syntax] tags, it'll be syntax highlighted.