I am dealing with a situation involving two elements, similar to two buttons placed side by side. I am dynamically toggling the class "focusd" to alter the highlighted effect. However, I have noticed a peculiar issue where the changes are not always properly reflected in the DOM. When I check in Chrome's console, I can see that the class changes are being made using removeClass/addClass in jQuery. However, upon inspecting the Elements tab in the developer tools, the classes displayed are still the old ones, and the visual changes are not being applied as expected.
I attempted a workaround by setting the parent div to display none and then back to block, but that did not solve the issue. Since this is a one-time modal screen, I have resorted to a rather inefficient hack where I copy the parent's innerHTML, remove and then reinsert the element. It's not an ideal solution, but it gets the job done.
// I am not sure why this hack is necessary, but without it, the buttons do not appear to be redrawn
var htm = jQuery(".rdata_container").html(); // copy the innerHTML
jQuery(".rdata_container").empty(); // empty and then re-append
jQuery(".rdata_container").append(htm);
This issue seems like a specific quirk that others may have encountered before. If anyone has experienced this and knows why these changes are not being reflected properly, I would greatly appreciate any insights.
EDIT Code can be found here: http://jsfiddle.net/roblevintennis/JCZnf/