Recently, I encountered a peculiar issue with an on-click event that seems to work only once. The intended functionality is to toggle the .p-active class, but instead, it only adds it.
The problem arises from dynamically added content post-click using lighttooltip.js. Strangely, this dynamic content seems to interfere with the toggleClass function within my click event, causing it to malfunction. I've attempted different delegation methods such as using document, "body", and ".hotspots", all to no avail. While using "div" and ".hotspot" for delegation allows the class to be toggled on, it fails to toggle off.
An interesting observation was made when I removed all .LiteTooltip jQuery code (found below the click function) - this restoration allowed the on-click function to behave as expected.
I seek assistance in resolving this matter. I've simplified the code by reducing the number of "hotspots" to 3 for enhanced readability.
Note: The hotspot number itself isn't being toggled properly - its color should change from pink to white upon toggling.
/**** look inside tooltip CSS ****/
...
}
});
</script>