在每个元素的基础上修改 X 可编辑模板（不是全局）

Question

我在 X-editable form using the following script (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

这不是最优雅的解决方案，但您可以使用单独的单击事件添加删除按钮，并在不需要删除时重置 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>';
}

Answer 2

使用 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/

在每个元素的基础上修改 X 可编辑模板（不是全局）

Modify X-editable templates on a per element basis (not globally)

javascript

jquery

x-editable

twitter-bootstrap-3