I want to enable quick edit within a block which contains some JS libraries (such as slick). As slick changes the DOM, when I use quick edit it saves this altered DOM and then the slick library doesn’t work.
Simplified example:
Saved HTML (pre-page load)
<div class="slick"> <li> <ul>Tile 1</ul> <ul>Tile 2</ul> </li> </div> Rendered HTML (page loaded)
<div class="slick"> <div class="slick-magic etc"> <li> <ul>Tile 1</ul> <ul>Tile 2</ul> </li> </div> </div> As the slick JS code adds the extra DOM content, when the user saves something via quick edit, the extra DOM content is saved to the page. Subsequently, when slick is rendered again by the JS, we get a slider that doesn’t work.
Is there a way to prevent quick edit from applying changes to anything within <div class="slick">? Alternatively, is there a place where I can use slick’s destroy method to the object before the block changes to edit mode?
Note:
- Have tried using Bootstrap’s carousel which doesn’t alter the DOM but the functionality is too limited to match what slick can provide
Edit:
The JS object resides within a block. I still need to use quick edit to edit the block, but also to protect the JS object
