How to avoid "Double-instantiating a pane on an element"

Question

Without going into too much detail, I have a plugin where I'm trying to manage two different sets of tabs with some custom javascript. When the object initializes, I need to add a pane from the page layout to the object. Something like:

this.$pane = new Craft.Pane($(".pane"));

That line of code kinda works. However, when the page loads the console reports:

Double-instantiating a pane on an element

If I remove the above line of code this.$pane = new Craft.Pane($(".pane"));, the console log message goes away. With the line of code some things work. Without the line of code other things work. I need all the things to work at the same time.

I'm struggling to know the right question to ask, so please point me in the right direction if I am off the mark. Is it possible to check if there is an existing Craft.Pane object that exists before I try to create a new Craft.Pane object?

Answer 1

I was able to resolve this by testing to see if the pane existed before re-instantiating the element. Happy to consider another answer if someone can explain what is going on better. For now, the following worked:

// Check to see if an element was already registered as a `Craft.Pane`:
if (!$("#myelement.pane").data('pane'))
{
    // Create a pane object if it is not
    this.$pane = new Craft.Pane($("#myelement.pane"));
}
else
{
    // Use the existing pane object if it exists
    this.$pane = $("#myelement.pane").data('pane');
}