防止对某些DOM元素进行快速编辑

Question

我想在一个包含一些JS库(比如slick)的块中启用快速编辑。当slick更改DOM时，当我使用快速编辑时，它会保存这个修改过的DOM，然后slick库就不能工作了。

简化示例：

保存的HTML (预页面加载)

<div class="slick">
  <li>
    <ul>Tile 1</ul>
    <ul>Tile 2</ul>
  </li>
</div>

呈现的HTML (页面加载)

<div class="slick">
  <div class="slick-magic etc">
  <li>
    <ul>Tile 1</ul>
    <ul>Tile 2</ul>
  </li>
  </div>
</div>

当灵活的JS代码添加额外的DOM内容时，当用户通过快速编辑保存某些内容时，额外的DOM内容将保存到页面中。随后，当slick再次由JS呈现时，我们会得到一个不能工作的滑块。

是否有一种方法可以防止快速编辑对<div class="slick">中的任何内容应用更改？或者，在块更改为编辑模式之前，我是否可以在对象上使用slick的destroy方法？

注意：

• 已经尝试过使用Bootstrap的旋转木马，它不会改变DOM，但是功能太有限，无法与slick提供的功能相匹配

编辑：

JS对象驻留在块中。我仍然需要使用快速编辑来编辑块，但也需要保护JS对象。

Answer 1

是否有一种方法可以防止快速编辑将更改应用于

一个快速的解决方法是，您可以编写一个小的jQuery片段，在QuickEdit应用其DOM更改后触发它。例如，假设我不想在任何节点上允许quickedit，即它可以是完全显示或挑逗。下面的代码将找到页面上的所有article标记并删除其data-quickedit-entity-id属性，因此quickedit选项将不可用。

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