Prevent Quick Editing on certain DOM elements

Question

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

Answer 1

Is there a way to prevent quick edit from applying changes to anything within

A quick fix is you can write a small jQuery snippet which gets trigger after QuickEdit apply its DOM changes. For example, suppose I do not want to allow quickedit on any node, i.e. it can be full display or teaser. Below code will find all article tags on page and remove its data-quickedit-entity-id attribute, so quickedit option won't be available for it.

$('article', context).removeAttr('data-quickedit-entity-id');