javascript - 在每个元素的基础上修改 X 可编辑模板(不是全局)

Question

我在 X-editable 中添加了一个删除按钮使用以下脚本 ( live demo ) 形成表单。

如何仅对某些元素(即 .editable-with-delete)而不是全局实现这一点？

$('.editable').editable();

$.fn.editableform.buttons += '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>';

$('.editable-with-delete').editable();


$("#list").on("click", "i.glyphicon-trash", function() {
  console.log('delete')
});

<h4>X-editable: display checklist as UL</h4>
<ul id='list'>
  <li class='editable-with-delete'>Editable element with delete</li>
  <li class='editable'>Editable element without delete</li>
  <li class='editable'>Editable element without delete</li>
</ul>

Answer 1

使用 X-editable 库当前提供的功能，我看不出有一种方法可以通过为您的可编辑对象设置选项来完成您想做的事情。

但是，您可以通过监听 shown 事件并在事件处理程序中添加按钮来实现。这是一个例子:

$('.editable').editable();

$(".editable-with-delete")
  .on("shown", function(ev, editable) {
    const buttons = editable.container.$form.find(".editable-buttons")[0];
    buttons.insertAdjacentHTML("beforeend", '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>')
  })
  .editable();

$("#list").on("click", ".editable-delete", function() {
  console.log('delete')
});

理想情况下，在我自己的应用程序中，我更愿意在显示弹出窗口之前添加按钮，但我没有看到使用库的公共(public) API 执行此操作的方法，因为它现在已经存在。无论如何，随着最近浏览器执行的回流优化，我怀疑在 shown 处理程序中添加按钮是否会明显影响用户体验。

这是一个修改过的 fiddle :https://jsfiddle.net/kuqjtdar/3/