How can I prevent a jQuery plugin from changing my DOM?

Question

I'm using a third-party commenting plugin and customizing a couple of elements using simple jQuery. In certain circumstances, though, the plugin refreshes itself and wipes out all of the changes I made to it. There is no event to attach a handler to associated with this refresh call, and I don't always have control over when it occurs.

Is there some way to prevent changes to certain elements? Or maybe a way to detect if certain (non-form) elements have changed so that I can change them back?

Answer 1

There is no way to prevent a piece of javascript in the page from changing your DOM elements.

Your choices are:

1. Study the offending javascript and deactivate it (render it so it doesn't operate). How exactly you do that will depend upon how that javascript works. You might replace some functions with more innocuous ones or deregister event handlers after it initializes itself or kill timers it has, etc...

2. Change the DOM so that the plug-in doesn't target the elements you want it to leave alone. Again, this would depend upon how the plug-in was identifying which elements it would change.

3. Regularly query your affected objects and restore their state after the plugin messes with it.

4. Deinstall the plugin.

Without studying the plug-in code, it is hard for us to be more specific than this.