I am programmatically updating the DOM on a WebKit webview via DOMElement
objects - for complex UI, there is usually a Javascript component to any element that I add. This begs the need to be notified when the updates complete -- is there any such event? I know regular divs don't fire an onload
or onready
event, correct? The other assumption I had, which may be totally wrong, is that DOMElement
updates aren't synchronous, so I can't do something like this and be confident it will meet with the label actually in the DOM:
DOMElement *displayNameLabel = [document createElement:@"div"];
[displayNameLabel setAttribute:@"class" value:@"user-display-name"];
[displayNameLabel setTextContent:currentAvatar.avatarData.displayName];
[[document getElementById:@"user-card-content"] appendChild:displayNameLabel];
id win = [webView windowScriptObject];
[win evaluateWebScript:@"javascriptInstantiateLabel()"];
Is this true?
I am using jQuery within the body of the html already, so I don't mind subscribing to a particular classes set of events via "live." I thought I might be able to do something like:
$(".some-class-to-be-added-later").live( "ready", function(){
// Instantiate some fantastic Javascript here for .some-class
});
but have experienced no joy so far. Is there any way on either side (objective-c since I don't programmaticall开发者_StackOverflow中文版y firing Javascript post load, or Javascript) to be notified when the element is in the DOM?
Edit: Based on Anurag's answer, here's the code I came up with (works):
function onButtonPanelChange() {
console.log( "Button panel subtree modified", 7 );
$(".panel-button").each( function(){
console.log( "Button found " + $(this).attr( "class" ), 7 );
if( !$(this).hasClass( "processed" ) ){
$("#bottom-button-panel").unbind( "DOMSubtreeModified" );
if( $(this).hasClass( "chat" ) ){
console.log( "Found chat button, instantiating", 7);
var chat_button = new Button( $(this), chat_button_def );
$(this).addClass( "processed" );
}
else if( $(this).hasClass( "get" ) ){
var chat_button = new Button( $(this), get_button_def );
$(this).addClass( "processed" );
}
$("#bottom-button-panel").bind( "DOMSubtreeModified", onButtonPanelChange );
console.log( "Done with button change, rebinding", 7 );
}
});
}
$(document).ready( function(){
$("#bottom-button-panel").bind( "DOMSubtreeModified", onButtonPanelChange);
});
Note that you hella need to unbind the event, since each subsequent change fires another event, and another, and another.
See a similar question that was asked an hour ago - Is there a JavaScript/jQuery DOM change listener?
To listen to changes on an element, use something like:
$("#someDiv").bind("DOMSubtreeModified", function() {
alert("tree changed");
});
I haven't scripted the DOM through Objective-C, so don't know if there's a way to subscribe to DOM events with the Objective-C wrappers.
The DOMSubtreeModified
modified event works on the iPhone. Just tested with this example.
精彩评论