基于每个元素（不是全局）修改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可编辑库当前提供的功能，我没有看到一种仅通过设置可编辑项的选项来完成您想做的事情的方法。

但是，您可以通过监听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')
});

理想情况下，在我自己的应用程序中，我希望在显示弹出窗口之前添加按钮，但是我看不到使用库的公共API来实现此功能的方法，因为它已经存在。无论如何，这些天来，随着浏览器执行的重熔优化，我怀疑在shown处理程序中添加按钮会明显影响用户体验。

这是一个经过修饰的小提琴：https://jsfiddle.net/kuqjtdar/3/

Answer 2

这不是最优雅的解决方案，但是您可以使用单独的click事件添加删除按钮，并在不需要删除时重置html。请参见下面的代码段。

$('#list').editable();

$('#list').on('click', '.editable',  ()=> resetButtons());

$('#list').on('click', '.editable-with-delete', ()=> { 
resetButtons();
$.fn.editableform.buttons += '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>';
});

function resetButtons() {
$.fn.editableform.buttons = '<button type="submit" class="btn btn-primary btn-sm editable-submit"><i class="glyphicon glyphicon-ok"></i></button><button type="button" class="btn btn-default btn-sm editable-cancel"><i class="glyphicon glyphicon-remove"></i></button>';
}