Manipulating dynamically added content
Hello - just to warn you again, I'm new to Javascript, JQuery and HTML so apologies if I use the wrong terminology and misunderstand things.
I want to make modifications to the attributes of some of my page elements when the document is displayed in a web browser. At the moment I use:
[code]
$(document).ready(function()
{
$('.myclassname a').each(function()
{
someElement.attr("title", 'My new title');
}
}
[/code]
- and so on, which works perfectly well for static pages, but doesn't work so well for pages with a lot of AJAX content. What I mean is, the browser events which (I believe) cause the .ready() function to fire are all long-since completed when some of the page content is added.
As an example of what I mean, see the comments below a YouTube video. I have a Win32 desktop application with an embedded MSHTML control that runs in conjunction with what I'm trying to do here in JQuery. I can see that the DocumentComplete event in that application is executed a long time before the video comments are added to the DOM.
I can use some low-level API call workarounds in the application to account for this, but I've no idea how to do the same kind of thing in JQuery.
So, more succinctly, how can I modify page elements that are added to the DOM after .ready() has already been executed?
The browser is obviously aware of this when it happens, but is there some other event I can respond to? Something like a ".pageUpdate()" which fires when the DOM changes?
The only other way I can think of - and I don't know at the moment whether this is even possible - and I hate the idea of it, would be to poll with a timer or something. I desperately hope I don't need to resort to something that nasty!
Thank you very much in advance
I want to make modifications to the attributes of some of my page elements when the document is displayed in a web browser. At the moment I use:
[code]
$(document).ready(function()
{
$('.myclassname a').each(function()
{
someElement.attr("title", 'My new title');
}
}
[/code]
- and so on, which works perfectly well for static pages, but doesn't work so well for pages with a lot of AJAX content. What I mean is, the browser events which (I believe) cause the .ready() function to fire are all long-since completed when some of the page content is added.
As an example of what I mean, see the comments below a YouTube video. I have a Win32 desktop application with an embedded MSHTML control that runs in conjunction with what I'm trying to do here in JQuery. I can see that the DocumentComplete event in that application is executed a long time before the video comments are added to the DOM.
I can use some low-level API call workarounds in the application to account for this, but I've no idea how to do the same kind of thing in JQuery.
So, more succinctly, how can I modify page elements that are added to the DOM after .ready() has already been executed?
The browser is obviously aware of this when it happens, but is there some other event I can respond to? Something like a ".pageUpdate()" which fires when the DOM changes?
The only other way I can think of - and I don't know at the moment whether this is even possible - and I hate the idea of it, would be to poll with a timer or something. I desperately hope I don't need to resort to something that nasty!
Thank you very much in advance